Textarea
Multi-line text field.
Usage
Textarea is a styled native <textarea> —
no Bits UI primitive behind it, because the platform already gives you everything. Pair it
with Label so it has an accessible name.
Sizes
Three sizes from the size prop. Unlike Input, height is driven by rows rather than a fixed value — sizes change padding and font size.
Variants
outline is a bordered transparent field; filled sits on a surface token with no border.
Resize
The default is vertical — users can grow the field without breaking
your layout. Use none when the surrounding layout cannot absorb a resize.
Invalid state
invalid paints the danger border and sets aria-invalid. It does not announce why — point aria-describedby at your error message so screen readers get the reason,
not just the state.
Notes cannot be empty.
Binding
value is bindable, so bind:value works exactly like
it does on a native textarea.
0 characters
Props
Plus every native <textarea> attribute via prop spreading — id, name, maxlength, required, readonly, and the event handlers.
| Prop | Type | Default |
|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' |
variant | 'outline' | 'filled' | 'outline' |
invalid Applies the danger styling and sets aria-invalid on the textarea. | boolean | false |
resize Which axes the user may drag to resize. Maps to the CSS resize property. | 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical' |
rows Initial visible line count. | number | 3 |
value Bindable via bind:value. | string | — |
class Extra classes merged onto the textarea. | string | — |