Textarea adds styling, key filtering and autoResize functionality to standard textarea element.
import Textarea from 'primevue/textarea';
Textarea is used with the v-model property for two-way value binding.
<Textarea v-model="value" rows="5" cols="30" />
Textarea integrates seamlessly with the PrimeVue Forms library.
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-1">
<Textarea name="address" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
When autoResize is enabled, textarea grows instead of displaying a scrollbar.
<Textarea v-model="value" autoResize 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" />
A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
<FloatLabel>
<Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
<label for="on_label">On Label</label>
</FloatLabel>
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
<IftaLabel>
<Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
<label for="description">Description</label>
</IftaLabel>
Textarea provides small and large sizes as alternatives to the base.
<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
<Textarea v-model="value2" placeholder="Normal" rows="3" />
<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
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" style="resize: none" placeholder="Address" />
When disabled is present, the element cannot be edited and focused.
<Textarea v-model="value" rows="5" cols="30" disabled />
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. |