Textarea
Textarea adds styling and autoResize functionality to standard textarea element.
Import #
import { TextareaModule } from 'primeng/textarea';Basic #
Textarea is applied to an input field with pTextarea directive.
AutoResize #
When autoResize is enabled, textarea grows instead of displaying a scrollbar.
Float Label #
A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
Ifta Label #
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
Sizes #
Textarea provides small and large sizes as alternatives to the base.
Fluid #
The fluid prop makes the component take up the full width of its container when set to true.
Filled #
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
Disabled #
When disabled is present, the element cannot be edited and focused.
Invalid #
The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with Angular Forms.
Forms #
Template Driven #
Reactive Forms #
Textarea can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
Accessibility #
Screen Reader
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>Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
