Textareas

Textarea components are used for collecting large amounts of textual data.

Usage

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

API

Examples

Props

Auto grow

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

v-textarea/prop-auto-grow.vue

Background color

The background-color and color props give you more control over styling v-textarea’s.

v-textarea/prop-background-color.vue

Browser autocomplete

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

v-textarea/prop-browser-autocomplete.vue

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.

v-textarea/prop-clearable.vue

Counter

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

v-textarea/prop-counter.vue

Icons

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

v-textarea/prop-icons.vue

No resize

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

v-textarea/prop-no-resize.vue

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.

v-textarea/prop-rows.vue

Misc

Signup form

Utilizing alternative input styles, you can create amazing interfaces that are easy to build and easy to use.

v-textarea/misc-signup-form.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.