Componentsbeta
Textarea
Multi-line text: bios, messages to organisers, booking notes. Same surface as Input, so mixed forms line up.
Example
0/280
vue
<Field label="About you" optional :hint="`${bio.length}/280`">
<Textarea v-model="bio" maxlength="280" placeholder="What you dance, where you learned…" />
</Field>States
Tell the teacher what you'd like to work on.
rows=2, resize off
vue
<Textarea placeholder="Default" />
<Textarea disabled model-value="Can't edit this" />
<Textarea invalid />
<Textarea :rows="2" :resize="false" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| v-model | string | — | The text. |
| rows | number | 4 | Initial height in lines. Minimum height is 96px regardless. |
| resize | boolean | true | Vertical drag handle. Turn off for short fixed boxes (e.g. a one-line note in a card). |
| invalid | boolean | false | Red border + aria-invalid without a Field. |
| class | string | — | Extra classes, merged with tailwind-merge. |
| …attrs | HTML attrs | — | placeholder, maxlength, disabled, required, name, id … go to the <textarea>. |
Do & don't
42/280
Do — Show a live counter in the hint when there is a limit.
Don't — Use a textarea for a one-line answer — it invites essays where you wanted a name.
Accessibility
- Label it with
Fieldlike any input. - Put limits in the hint (it is read out via
aria-describedby), not only inmaxlength, which silently stops typing. - Keep
resizeon for long text — people with large fonts need the room.