Basic

v-textarea in its simplest form is a multi-line text-field, useful for larger amounts of text.

Default
Auto Grow

When using the auto-grow prop, textarea's will automatically increase in size when the contained text exceeds its size.

Auto Grow
Variant

Use filled, plain, outlined, solo and underlined option of variant prop to change the look of file input.

Default
Solo
Filled
Outlined
Underlined
Plain
States

Use disabled and readonly prop to change the state of textarea.

Disabled
Hint text
Readonly
Hint text
Browser autocomplete

The autocomplete prop gives you the option to enable the browser to predict user input.

Email
Clearable

You can clear the text from a v-textarea by using the clearable prop, and customize the icon used with the clearable-icon prop.

Text
Counter

The counter prop informs the user of a character limit for the v-textarea.

Text
6 / 160
Icons

The append-icon, prepend-icon, append-inner-icon and prepend-inner-icon props help add context to v-textarea.

Prepend-icon
Append-icon
Prepend-inner-icon
Append-inner-icon
Rows

The rows prop allows you to define how many rows the textarea has, when combined with the row-height prop you can further customize your rows by defining their height.

One row
Two rows
Three rows
Four rows
No resize

v-textarea's have the option to remain the same size regardless of their content's size, using the no-resize prop.

Text
Validation

Use rules prop to validate the textarea.

Validation