Textarea adds styling, key filtering and autoResize functionality to standard textarea element.

import Textarea from 'primevue/textarea';

A model can be bound using the standard v-model directive.

<Textarea v-model="value" rows="5" cols="30" />

When autoResize is enabled, textarea grows instead of displaying a scrollbar.

<Textarea v-model="value" autoResize rows="5" cols="30" />

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

    <Textarea v-model="value" rows="5" cols="30" />

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<Textarea v-model="value" variant="filled" rows="5" cols="30" />

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />

When disabled is present, the element cannot be edited and focused.

<Textarea v-model="value" rows="5" cols="30" disabled />

Screen Reader

Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.

<label for="address1">Address 1</label>
<Textarea id="address1" />

<span id="address2">Address 2</span>
<Textarea aria-labelledby="address2" />

<Textarea aria-label="Address Details"/>

Keyboard Support

tabMoves focus to the input.