Textarea
A multi-line text input; compose inside a Field for the label and a11y wiring.
Usage
A multi-line text input — the editable sibling of Input, reusing the same chrome sources so it never drifts in look or state handling. Compose it inside a Field for the label and a11y wiring. For every combination and state side by side, see the Field Matrix.
import { Textarea } from '@epilot/spark-ui/textarea'Enter inserts a newline instead of submitting the surrounding form — a real
behavior change from Input. Add a Cmd/Ctrl+Enter submit shortcut in app code
if that loss matters for a given form.
Auto-resize
autoResize swaps the draggable resize handle for CSS field-sizing: content:
the control grows with typed content, no JS observers. rows stays the floor;
cap growth with className="max-h-…". Browsers without field-sizing support
keep the rows height.
Invalid textarea
Set data-invalid on the Field and aria-invalid on the textarea: the border
and text switch to the error palette and stay red while focused.
Disabled textarea
Set data-disabled on the Field and disabled on the textarea: the label
dims and the control is grayed out and non-interactive.
API Reference
Textarea
All native <textarea> props, plus:
| Prop | Type | Default |
|---|---|---|
variant | "soft" | "surface" | "outlined" | "ghost" | "none" | follows the enclosing Field, else the data-input-style knob (soft) |
autoResize | boolean | false — CSS-only growth via field-sizing-content |
rows | number | 3 |
variant="none" renders chrome-less. An explicit variant keeps the box
chrome even inside a labelPosition="inset" field (where the Field shell
would otherwise carry the box).
Field state attributes
Set on Field; the composition reacts as a whole.
| Attribute | Pair with | Effect |
|---|---|---|
data-invalid | aria-invalid on the textarea | label + text turn error red; filled inset shells tint error-soft |
data-disabled | disabled on the textarea | control text dims, filled inset shells tint gray-soft; the label keeps full contrast |