Components
Textarea
Multi-line text field. Grows with content (field-sizing: content). Use for freeform notes; for structured input, split into multiple Inputs.
When to usefor freeform prose — notes, abort reasons, comments — where the shape of the content is unpredictable.
Import
import { Textarea } from "@ravnhq/efni/textarea"Default
<Label htmlFor="note">Operator note</Label>
<Textarea id="note" placeholder="…" />Invalid
<Textarea aria-invalid />Disabled
Accessibility
| Key | Action |
|---|---|
| Enter | Insert a newline (submit only via a button). |
| Tab | Move focus out; Shift+Tab moves back. |
- Always pair with a Label — never a bare placeholder.
- Set aria-invalid when displaying an error and describe it via aria-describedby.
- The auto-grow behaviour uses field-sizing: content; provide rows= for a sensible starting height.
Guidelines
Do
- Give a placeholder that hints at the shape of the answer.
- Show a character counter for hard limits — 200 characters at the top of the field.
- Persist drafts as the user types when the surrounding form is long.
Don't
- Don't stack multiple long textareas — split into steps or a Sheet.
- Don't disable resize (browser default) without a good reason.
- Don't use a textarea when the input is single-line — use Input.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
…props | React.ComponentProps<"textarea"> | — | Everything Textarea passes to the element it renders. |