Forms
Textarea
A multi-line field. Auto-resize is CSS (`field-sizing: content`, with a replica fallback) rather than a keystroke handler — so it also grows on paste, on a programmatic set, and for an initial value, none of which v0 handled.
data-scope="textarea"
Usage
<Textarea label="Notes" autoResize rows={3} /><Textarea label="Notes" auto-resize :rows="3" /><Textarea label="Notes" autoResize rows={3} /><textarea ckTextarea label="Notes" autoResize [rows]="3"></textarea>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | "default" | "filled" | "outline" | "default" | Field style. v0 had Input take `outline` and Textarea `outlined`. |
size | "sm" | "md" | "lg" | "md" | Control size. |
label | ReactNode | — | Label, associated by id. |
helperText | ReactNode | — | Hint below the field. |
invalid | boolean | false | Marks the field invalid. v0 called this `error`. |
errorMessage | ReactNode | — | Replaces helperText and wins aria-describedby. |
fullWidth | boolean | true | Stretch to 100%. |
autoResize | boolean | false | Grow with the content. |
Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.
Migrating from react-ui-toolkit
| v0 | v1 | Notes |
|---|---|---|
error | invalid | |
variant="outlined" | variant="outline" | Now matches Input. |