Textarea
Multi-line text input with optional label, hint, and error state
Category: inputs · WCAG 2.2-AA · form, text, multiline
States
- idle
- focused
- error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label for the control (standalone use). Omit it when wrapping the Textarea in a Field — the Field owns the label, and setting both double-labels the control. |
hint | string | — | Supplementary hint text shown with the control. |
error | string | — | Error message shown when the value is invalid. |
rows | number | 4 | Number of visible text rows. |
resize | 'none' | 'vertical' | 'both' | vertical | Which directions the textarea can be resized ('none' | 'vertical' | 'both'). |
autosize | boolean | false | Grow the control with its content instead of holding the fixed rows height. rows becomes the minimum and --cascivo-textarea-max-block-size (default 20lh) the ceiling. Pure CSS (field-sizing: content) — no measurement and no listener; where unsupported the fixed rows height is kept. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
ariaLabel | string | — | Invisible accessible name, for when a visible element outside this component already labels it and `label` would render that text a second time. ⚠ `label` on this component is **visible**; `IconButton.label`/`Sparkline.label` are invisible names, which is the prior that costs adopters a duplicated label. The raw DOM `aria-label` still wins over this. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-color-destructive--cascivo-radius-input--cascivo-focus-ring--cascivo-textarea-max-block-size
When to use
- Capturing multi-line free text such as messages, descriptions, or comments
- Input where line breaks are meaningful and the content may wrap to several rows
- Form fields that benefit from a visible hint or validation error beneath the control
When not to use
- A single short value like a name or email — use Input
- A constrained numeric value — use NumberInput
How to build an accessible Textarea in React →
Examples
With label
<Textarea label="Message" placeholder="Type here…" />With error
<Textarea label="Bio" error="Bio is required" />