import Textarea from 'primevue/textarea';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"></script>
A model can be bound using the standard v-model directive.
<Textarea v-model="value" rows="5" cols="30" />
In auto resize mode, textarea grows instead of displaying a scrollbar.
<Textarea v-model="value" :autoResize="true" rows="5" cols="30" />
Textarea passes any attribute to the underlying textarea element, additional attributes are the following.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | any | null | Value of the component. |
| autoResize | boolean | false | When present, height of textarea changes as being typed. |
Any valid event such as focus, blur and input are passed to the underlying input element.
Following is the list of structural style classes, for theming classes visit
| 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. |
None.