Textarea adds styling and autoResize functionality to standard textarea element.
import { TextareaModule } from 'primeng/textarea';
Textarea is applied to an input field with pTextarea directive.
<textarea rows="5" cols="30" pTextarea [(ngModel)]="value"></textarea>
Textarea 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" pTextarea formControlName="text"></textarea>
</form>
When autoResize is enabled, textarea grows instead of displaying a scrollbar.
<textarea rows="5"cols="30" pTextarea [autoResize]="true"></textarea>
A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
<p-floatlabel>
<textarea pTextarea id="over_label" [(ngModel)]="value1" rows="5" cols="30" style="resize: none" class="h-full"></textarea>
<label for="over_label">Over Label</label>
</p-floatlabel>
<p-floatlabel variant="in">
<textarea pTextarea id="over_label" [(ngModel)]="value2" rows="5" cols="30" style="resize: none" class="h-full"></textarea>
<label for="in_label">In Label</label>
</p-floatlabel>
<p-floatlabel variant="on">
<textarea pTextarea id="over_label" [(ngModel)]="value3" rows="5" cols="30" style="resize: none" class="h-full"></textarea>
<label for="on_label">On Label</label>
</p-floatlabel>
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
<p-iftalabel>
<textarea pTextarea id="description" [(ngModel)]="value" rows="5" cols="30" style="resize: none"></textarea>
<label for="description">Description</label>
</p-iftalabel>
Textarea provides small and large sizes as alternatives to the base.
<textarea pTextarea [(ngModel)]="value1" pSize="small" placeholder="Small" rows="3"></textarea>
<textarea pTextarea [(ngModel)]="value2" placeholder="Normal" rows="3"></textarea>
<textarea pTextarea [(ngModel)]="value3" pSize="large" placeholder="Large" rows="3"></textarea>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<textarea [(ngModel)]="value" variant="filled" rows="5" cols="30" pTextarea></textarea>
Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
<textarea rows="5" cols="30" pTextarea [(ngModel)]="value" class="ng-invalid ng-dirty" placeholder="Address"></textarea>
When disabled is present, the element cannot be edited and focused.
<textarea rows="5"cols="30" pTextarea [disabled]="true"></textarea>
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 pTextarea id="address1"></textarea>
<span id="address2">Address 2</span>
<textarea pTextarea aria-labelledby="address2"></textarea>
<textarea pTextarea aria-label="Address Details"></textarea>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |