InputText is an extension to standard input element with theming and keyfiltering.
import { InputTextModule } from 'primeng/inputtext';
InputText is used as a controlled input with ngModel properties.
<input type="text" pInputText [(ngModel)]="value" />
InputText can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<input type="text" pInputText formControlName="text" />
An advisory text can be defined with the semantic small tag.
<div class="flex flex-column gap-2">
<label for="username">Username</label>
<input
pInputText
id="username"
aria-describedby="username-help"
[(ngModel)]="value" />
<small id="username-help">
Enter your username to reset your password.
</small>
</div>
A floating label appears on top of the input field when focused.
<p-floatLabel>
<input pInputText id="username" [(ngModel)]="value" />
<label for="username">Username</label>
</p-floatLabel>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<input
type="text"
pInputText
[(ngModel)]="value"
variant="filled" />
Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
<input
pInputText
class="ng-invalid ng-dirty"
[(ngModel)]="value" />
When disabled is present, the element cannot be edited and focused.
<input
id="disabled-input"
type="text"
pInputText
[disabled]="true"
[(ngModel)]="value" />
| Name | Element |
|---|---|
| p-inputtext | Input element |
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" />
| Key | Function |
|---|---|
| tab | Moves focus to the input. |