Forms
Textarea
A multi-line text input with optional autosize.
<UiTextarea />Model value
modelValue is the field's value, two-way bound.
0 characters
Placeholder
placeholder is shown while the field is empty. It disappears the moment someone types, so anything they need to keep belongs in a FormField label or hint instead.
Disabled
disabled disables the textarea and applies a disabled style.
Variant
variant picks between the ringed, transparent outline field and the lightly tinted soft one with no ring.
Icon left
iconLeft is an icon at the start of the field.
Icon right
iconRight puts a glyph at the end of the field — the place for an affordance that follows the value rather than labels it.
Rows
rows sets how tall the field starts, in text rows.
Autoresize
autoresize grows the field to fit its content instead of scrolling inside a fixed height.
autoresize sets an inline height from the content, which overrides the rows attribute — a min-h-9 (36px) floor keeps an empty field from collapsing to nothing, but rows itself has no effect while autoresize is on. Use maxrows for the upper bound.
autoresize also forces resize-none, so resizable has no effect while it's on.
Maxrows
maxrows caps that growth — past it the field scrolls instead. Only meaningful with autoresize.
Resizable
resizable lets the reader drag the corner. Ignored when autoresize is on — the two would fight.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
booleanfalseEmits
update:modelValue[value: string]