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 ​

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

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.