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'). |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-color-destructive--cascivo-radius-input--cascivo-focus-ring
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" />