InputText
InputText is an extension to standard input element with theming and keyfiltering.
Import #
import { InputTextModule } from 'primeng/inputtext';Basic #
InputText is used as a controlled input with ngModel property.
Float Label #
FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
Ifta Label #
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
Sizes #
InputText provides small and large sizes as alternatives to the standard.
Fluid #
The fluid prop makes the component take up the full width of its container when set to true.
Help Text #
An advisory text can be defined with the semantic small tag.
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 #
Accessibility #
Screen Reader
InputText component renders a native input 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="firstname">Firstname</label>
<input pInputText id="firstname" />
<span id="lastname">Lastname</span>
<input pInputText aria-labelledby="lastname" />
<input pInputText aria-label="Age" />Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
