Appearance

Textarea ​

A simple component that allows you to input long texts

Basic Textarea ​

template
<Textarea />

Default value ​

template
<Textarea model-value="A default value" />

Error text ​

There is an error
template
<Textarea error-text="There is an error" />

Hint text ​

Try entering some text here

Using a prop:

template
<Textarea hint-text="Try entering some text here" />

Using a slot:

template
<Textarea>
  <template #hint>
    Try entering some text here
  </template>
</Textarea>

Label ​

template
<Textarea label="Hello label" />

Placeholder ​

template
<Textarea placeholder="One does not simply walk into Mordor" />

Placeholder and hint ​

Try entering some text here
template
<Textarea hint-text="Try entering some text here" placeholder="One does not simply walk into Mordor" />

Disabled ​

WARNING

If the user cannot take any action to make the field editable, the is-read-only prop should be used instead.

See Disabled vs read-only for details.

Try entering some text here
template
<Textarea hint-text="Try entering some text here" placeholder="One does not simply walk into Mordor" disabled />

Read Only ​

Similar to disabled fields, read-only fields cannot be edited. However, unlike disabled fields, read-only fields are able to receive focus, but are not intended to become editable.

Rows number ​

The number of rows can be set to a specific value.

Max length ​

The maximum number of characters that can be entered.

Resizable ​

The resize property will allow the textarea to be vertically resizable. It will automatically scroll the parent container (if parent container is scrollable) or page down as necessary.

template
<Textarea resize placeholder="placeholder text" />

Alternatively, it is possible to disable the automatic scroll if needed.

template
<Textarea :resize="{ forceBrowserScroll: false }" placeholder="placeholder text" />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.