# Textarea

import { Textarea } from "zudoku/ui/Textarea";
import { Label } from "zudoku/ui/Label";

A multiline text input component for forms and user input.

## Import

```tsx
import { Textarea } from "zudoku/ui/Textarea";
```

## Basic Usage

<Textarea placeholder="Type your message here." />

```tsx
<Textarea placeholder="Type your message here." />
```

## With Label

<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
</div>

```tsx
<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
</div>
```

## With Text

<div className="grid w-full gap-1.5">
  <Label htmlFor="message-2">Your message</Label>
  <Textarea placeholder="Type your message here." id="message-2" />
  <p className="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
</div>

```tsx
<div className="grid w-full gap-1.5">
  <Label htmlFor="message-2">Your message</Label>
  <Textarea placeholder="Type your message here." id="message-2" />
  <p className="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
</div>
```

## Disabled State

<Textarea disabled placeholder="Disabled textarea" />

```tsx
<Textarea disabled placeholder="Disabled textarea" />
```

## Custom Height

<Textarea className="min-h-[150px]" placeholder="Taller textarea" />

```tsx
<Textarea className="min-h-[150px]" placeholder="Taller textarea" />
```

## Custom Styling

The Textarea component accepts all standard textarea HTML attributes and can be customized with
additional className:

```tsx
<Textarea className="resize-none" placeholder="Non-resizable textarea" />
```