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 || ' ' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-inputtextarea | Textarea element |
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"/>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |