TextArea is a flexible multi-line input component for text. It supports color and size variants, ghost style, and integrates easily with forms and v-model. Use it for comments, messages, and other multi-line input scenarios.
The TextArea components include the following:
The TextArea component provides a styled multi-line input for text, supporting color and size variants, ghost style, and easy v-model integration.
| TextArea Props | Type | Description |
|---|---|---|
modelValue | string | |
placeholder | string | Placeholder text for the textarea. |
type | 'text' | 'phone' | 'email' | 'search'
| Sets the textarea input type. |
ghost | boolean | Makes the textarea transparent until focused. |
disabled | boolean | Disables the textarea. |
color | string | Sets the color theme. Options: |
| neutral | boolean | Shortcut for |
| primary | boolean | Shortcut for |
| secondary | boolean | Shortcut for |
| accent | boolean | Shortcut for |
| info | boolean | Shortcut for |
| success | boolean | Shortcut for |
| warning | boolean | Shortcut for |
| error | boolean | Shortcut for |
size | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
| Sets the textarea size. Options: |
| xl | boolean | Shortcut for |
| lg | boolean | Shortcut for |
| md | boolean | Shortcut for |
| sm | boolean | Shortcut for |
| xs | boolean | Shortcut for |
validator | boolean | Adds the |
| TextArea Events | Arguments | Description |
|---|---|---|
update:modelValue |
The ValidatorHint component provides a styled container for validation messages or hints, often used in conjunction with form validation.
| ValidatorHint Slots | Description |
|---|---|
default | Displays the validation message or hint text. |
A textarea with a bordered style.
Textarea with different color variants.
A disabled textarea.
A textarea with ghost (transparent) style.
Textarea used within a form control, showing label integration.