TextArea
Multi-line text input for longer form content. Uses native textarea element with token-based styling.
Anatomy
1
- 1 Container — bordered text area with padding and border radius
Options
States
Default
Hover
Focus
Disabled
Table of options
| Property | Values | Default |
|---|---|---|
| placeholder | text | — |
| value | text | — |
| rows | number | 3 (via min-height) |
| disabled | true / false | false |
| readonly | true / false | false |
Behaviors
Vertical resize
Users can resize the textarea vertically by default. Disabled and readonly states prevent resizing.
Keyboard interactions
| Key | Action |
|---|---|
| Tab | Moves focus to/from the textarea |
| Enter | Inserts a new line |
Accessibility
- Uses native
<textarea>element — inherits all built-in accessibility. - Always pair with a visible
<label>oraria-label. - Placeholder text is not a substitute for a label.
Design checklist
All color themesWorks across light and dark modes.
Defined optionsStates and properties documented.
Keyboard interactionsNative textarea behavior.
Design tokensComponent-scoped tokens (
--textarea-*).