Textarea #
Textareas are used for multiline input. They support auto resizing, validation, and more.
Examples #
Default #
By default textarea is two rows input.
Label #
You can specify label prop to add label to textarea. By default label is placed above textarea.
In case you want to keep label inside textarea, you can use :inner-label="true" prop.
Autosize #
There are situations when you want textarea to grow in size as user types. You can use :autosize="true" prop to enable this behavior.
You can also specify minRows and maxRows props to limit textarea size.
Validation #
With rules prop you can specify validation rules for textarea.
You can also use counter and maxLength props to limit textarea length. Notice that maxLength prop will not prevent user from typing more characters and will not show error, so you need to add validation rule manually.
Validation rule can return error message or boolean. You can also use required-mark rule to add * to label.
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| autosize | Sets textarea possibility to grow up automatically |
|
|
| background | The color name of the background color |
| - |
| clearValue | Sets value that should be set after clearing |
|
|
| color | Sets input color |
|
|
| counter | Shows counter |
| - |
| dirty | Sets the dirty state of the component |
|
|
| disabled | Disable the input |
|
|
| error | Sets input state to error |
| - |
| errorCount | Number of error messages displayed |
|
|
| errorMessages | Displays a list of error messages or message if using a string |
| - |
| immediateValidation | Sets the validation to be performed when the component is mounted |
|
|
| innerLabel | Makes label render inside input |
|
|
| inputAriaDescribedby |
| - | |
| inputAriaLabel |
|
| |
| inputAriaLabelledby |
| - | |
| label | Sets input label |
|
|
| loading | Indicates that something is loading (spinner icon). |
|
|
| maxLength | Sets max length of input |
| - |
| maxRows | Maximum count of lines |
| - |
| messages | Displays a list of messages or message if using a string |
|
|
| minRows | Minimal count of lines |
|
|
| modelValue | The value of the |
|
|
| name | Applies |
| - |
| placeholder | Sets input placeholder |
| - |
| preset | Named preset combination of component props. |
| - |
| readonly | Puts input in readonly state |
|
|
| requiredMark | Adds required mark to the label |
|
|
| resize | Sets textarea resize |
|
|
| rules | Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| success | Sets input state to success |
|
|
Events #
| Name | Description |
|---|---|
change | |
click | On click. |
input | On value change. |
update:dirty | Fires when the dirty state changes |
update:error | Fires when the error state changes |
update:errorMessages | Fires when the error messages change |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |