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>

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>

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

<textarea rows="5" cols="30" pInputTextarea [disabled]="true"></textarea>

p-inputtextareaTextarea element
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

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"/>

Keyboard Support

tabMoves focus to the input.