Textarea
Multi-line text field with the same validation and focus behaviour as Input.
Preview
Live preview
Markdown is supported.
Usage
Examples
Invalid state
Description must be at least 20 characters.
<Textarea invalid aria-label="Description" defaultValue="hi" />
<p className="text-xs font-medium text-destructive">
Description must be at least 20 characters.
</p>Fixed height with counter
280 characters max
<div className="space-y-2">
<Textarea className="resize-none" maxLength={280} aria-label="Tweet" />
<p className="text-right text-xs text-muted-foreground">280 characters max</p>
</div>Disabled
<Textarea disabled defaultValue="Editing is locked." aria-label="Notes" />Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| invalid | boolean | — | Marks the field invalid: sets aria-invalid, data-invalid and the destructive border. |
| rows | number | 3 | Initial visible height in text rows. |
| resize | "none" | "vertical" | — | Pass via className — resize-none for fixed heights, default is vertical. |
| disabled | boolean | — | Native disabled state — dimmed and skipped by keyboard. |
| required | boolean | — | Native required flag: browser validation plus SR announcement. |
| …native textarea attrs | TextareaHTMLAttributes<HTMLTextAreaElement> | — | value, onChange, maxLength, placeholder, … |
Accessibility
Accessibility notes
- Same naming rule as Input: pair with Label htmlFor or wrap it in Field.
- Keep resize vertical (default) — disabling resize entirely can trap content off-screen for low-vision users who zoom.
- Mark invalid with the invalid prop and describe the reason in text linked via aria-describedby.
- autoGrow behaviour is not built in: if you add it, keep the accessible height in sync (no display:none content).