InputTextarea adds styling and autoResize functionality to standard textarea element.
import { InputTextareaModule } from 'primeng/inputtextarea';
InputTextarea is applied to an input field with pInputTextarea directive.
<textarea rows="5" cols="30" pInputTextarea [(ngModel)]="value"></textarea>
InputTextarea can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<textarea rows="5" cols="30" pInputTextarea formControlName="text"></textarea>
</form>
When autoResize is enabled, textarea grows instead of displaying a scrollbar.
<textarea rows="5" cols="30" pInputTextarea [autoResize]="true"></textarea>
InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
<textarea pKeyFilter="int" rows="5" cols="30" pInputTextarea></textarea>
A floating label appears on top of the input field when focused.
<span class="p-float-label">
<textarea id="float-input" rows="5" cols="30" pInputTextarea></textarea>
<label for="float-input">Summary</label>
</span>
When disabled is present, the element cannot be edited and focused.
<textarea rows="5" cols="30" pInputTextarea [disabled]="true"></textarea>
| Name | Element |
|---|---|
| p-inputtextarea | Textarea element |
InputTextarea 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 pInputTextarea id="address1" />
<span id="address2">Address 2</span>
<textarea pInputTextarea aria-labelledby="address2" />
<textarea pInputTextarea aria-label="Address Details"/>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
API defines helper props, events and others for the PrimeNG InputTextarea module.
| Name | Type | Default | Description |
|---|---|---|---|
| autoResize | boolean | false | When present, textarea size changes as being typed. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| Name | Parameters | Description |
|---|---|---|
| onResize | event: Event object | Callback to invoke when element is resized. |