Multi-line text input for longer content.
| Name | Type | Default | Description |
|---|---|---|---|
| placeholder | string | — | Placeholder text |
| disabled | boolean | — | Disable textarea |
| rows | number | — | Number of visible rows |
| maxLength | number | — | Maximum character limit |
| showCount | boolean | — | Show character counter (requires maxLength) |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.background | var(--background) | Textarea background | |
| Border | color.input | var(--input) | Border color | |
| Text | color.foreground | var(--foreground) | Text color | |
| Placeholder | color.muted-foreground | var(--muted-foreground) | Placeholder text | |
| Focus Ring | color.ring | var(--ring) | Focus indicator |
Basic textarea for multi-line text input.
<Textarea placeholder="Type your message here..." />
Control the visible height with the rows prop.
<Textarea rows={2} placeholder="2 rows" />
<Textarea rows={4} placeholder="4 rows (default)" />
<Textarea rows={8} placeholder="8 rows" />Show remaining characters with maxLength and showCount.
<Textarea placeholder="Your bio..." maxLength={280} showCount />Different interactive states.
<Textarea defaultValue="With default value" /> <Textarea placeholder="Disabled textarea" disabled />