TextArea Component
Field chrome
TextArea renders its own label (above), a right-aligned aside, and error / description rows via the shared FieldChrome — see /fields for the full model.
Variants
variant tints the border + placeholder (same calc as Input); borderless drops the frame.
Sizes
Basic
Minimum Rows
minRows sets the starting/minimum height; the floor is 1, so a
single-line box that grows from one row is possible (e.g. a chat/compose input). Default is 3.
Copy modes
One exclusive copy prop controls the copy affordance: 'selection' (default — select text to copy, no button), 'button' (also show a copy-to-clipboard button), or 'none' (not copyable / not selectable). Orthogonal to readonly/disabled.
With Validation
Max Rows & Scrollbar
Read-Only
Read-only mode prevents editing but still allows text selection and copying.
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | "" | The textarea value (bindable) |
| copy | 'none' | 'selection' | 'button' | 'button' | Copy affordance: button, native selection only, or none (not selectable) |
| validate | (value: string) => boolean | string | undefined | Validation function |
| minRows | number | 3 | Minimum number of visible rows (enforced minimum: 2) |
| maxRows | number | 10 | Maximum number of visible rows |
| readonly | boolean | false | Makes textarea read-only (prevents editing but allows selection) |
| disabled | boolean | false | Disables the textarea |
| class | string | "" | Container CSS class |
| textareaClass | string | "" | Textarea element CSS class |
Lines Array
TextArea
Array Value
Auto-sizing
When maxRows is omitted, the TextArea grows to fit all content without height
restrictions.
Try pasting a lot of text to see it expand!
Conflict Handling
⚠️ Development Warnings
The TextArea component shows warnings in development mode for:
- Prop conflicts: When both
valueandlinesare provided,valuetakes precedence - Empty content: When no
valueorlinesare provided, TextArea will be empty
Content precedence: value > lines