Label — identifies the field
Container — border, background, radius
Placeholder / value text
Helper / error text
Resize handle
Examples
Default
Standard multi-line input for messages, descriptions, and notes.
With label and helper text
Max 500 characters
Sizes
SM (80px min-height) and MD (120px min-height).
States
Textarea shares the same 6 states as Input: default, hover, focus, error, disabled, and readonly.
All states
Default
Hover
Focus
Error
This field is required
Disabled
Read only
Error with validation message
Please enter a message of at least 20 characters
Anatomy
Helper text
Design tokens
| Token | Value | Description |
|---|---|---|
input/background/default | #ffffff | Default fill |
input/background/disabled | #e1e1e1 | Disabled / readonly fill |
input/border/default | #cbd5e1 | Default border |
input/border/focus | #318272 | Focus border (brand-700) |
input/border/error | #ef4444 | Error border |
focus/color | teal/30% | Focus ring shadow |
Radius/sm | 4px | Corner radius |
Stroke/sm | 1px | Border width |
scale/12 | 12px | Vertical padding SM |
scale/16 | 16px | Horizontal padding MD |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "md" | Height and padding scale |
state | "default" | "hover" | "focus" | "error" | "disabled" | "readonly" | "default" | Visual state |
placeholder | string | — | Placeholder text |
value | string | — | Controlled value |
rows | number | 4 | Visible row count hint |
maxLength | number | — | Maximum character limit |
label | string | — | Field label |
helperText | string | — | Supporting text below the field |
errorText | string | — | Validation error message |
disabled | boolean | false | Prevents interaction |
readOnly | boolean | false | Value is displayed but not editable |
Content guidelines
Do
- ✓ Use a label that clearly describes the expected content
- ✓ Show character count for limited inputs
- ✓ Allow resize when content length is variable
- ✓ Pair with a Form Field wrapper for consistent spacing
Don't
- ✗ Use for single-line inputs — use Input instead
- ✗ Disable resize without a clear layout reason
- ✗ Use placeholder text as a substitute for a label
- ✗ Leave the field unlabelled for accessibility