Textarea
Interactive documentation for the textarea component. Change props in the playground, inspect states, and copy the generated example.
Preview
Code
<Textarea
v-model="value"
placeholder="Placeholder"
class="w-[320px]"
/>States
Dedicated examples for default, filled, disabled, error, required, and autoresize states.
Filled
Disabled empty
Disabled filled
Error empty
Error message
Error message
Error filled
Error message
Error message
Required
Autoresize
Props
This table matches the current TextareaProps interface.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| modelValue | string | '' | Required | Current textarea value. Used with v-model binding. |
| rows | number | l: 3, xl: 4 | Optional | Controls the minimum visible rows. If not provided, default value depends on size. |
| placeholder | string | undefined | Optional | Floating label text displayed above the textarea when focused or filled. |
| disabled | boolean | false | Optional | Disables the textarea and applies disabled visual styles. |
| class | string | 'w-full' | Optional | Custom class applied to the root wrapper. Useful for controlling width. |
| error | string | undefined | Optional | Error message displayed below the textarea. Also switches border and outline to error state. |
| size | 'l' | 'xl' | 'l' | Optional | Controls text size, label size, border radius, default rows, and line height. |
| maxRows | number | 12 | Optional | Maximum row count used for autoresize height calculation. |
| autoresize | boolean | false | Optional | Automatically adjusts textarea height based on content until maxRows is reached. |
| required | boolean | false | Optional | Shows a required asterisk next to the floating label. |