Textarea

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.



<span class="p-float-label">
    <Textarea v-model="value" rows="5" cols="30" />
    <label>Username</label>
</span>

Invalid state style is added using the p-invalid class to indicate a failed validation.



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

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



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

Compatibility with popular Vue form libraries.

VeeValidate is a popular library for handling forms in Vue.

 


<div class="card flex justify-content-center">
    <form @submit="onSubmit" class="flex flex-column gap-2">
        <span class="p-float-label">
            <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
            <label for="value">Description</label>
        </span>
        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
        <Button type="submit" label="Submit" />
    </form>
    <Toast />
</div>

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

KeyFunction
tabMoves focus to the input.