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>
A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
<p-floatLabel>
<textarea
id="float-input"
rows="5" cols="30"
pInputTextarea>
</textarea>
<label for="float-input">Summary</label>
</p-floatLabel>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<textarea
variant="filled"
rows="5"
cols="30"
pInputTextarea
[(ngModel)]="value">
</textarea>
Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
<textarea
rows="5"
cols="30"
pInputTextarea
[(ngModel)]="value"
class="ng-invalid ng-dirty">
</textarea>
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"></textarea>
<span id="address2">Address 2</span>
<textarea pInputTextarea aria-labelledby="address2"></textarea>
<textarea pInputTextarea aria-label="Address Details"></textarea>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
API defines helper props, events and others for the PrimeNG InputTextarea module.
InputTextarea adds styling and autoResize functionality to standard textarea element.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.