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"/>
Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either .p-input-icon-left or p-input-icon-right class.
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input type="text" pInputText [(ngModel)]="value" />
</span>
InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
<input pInputText pKeyFilter="int" placeholder="Integers" [(ngModel)]="value" />
Apply .p-inputtext-sm to reduce the size of the input element or .p-inputtext-lg to enlarge it.
<input pInputText type="text" class="p-inputtext-sm" placeholder="Small" [(ngModel)]="value" />
<input pInputText type="text" placeholder="Normal" [(ngModel)]="value2" />
<input pInputText type="text" class="p-inputtext-lg" placeholder="Large" [(ngModel)]="value3" />
An advisory text can be defined with the semantic small tag.
<div class="flex flex-column gap-2">
<label htmlFor="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.
<span class="p-float-label">
<input pInputText id="username" [(ngModel)]="value" />
<label htmlFor="username">Username</label>
</span>
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"></input>
<span id="lastname">Lastname</span>
<input pInputText aria-labelledby="lastname"></input>
<input pInputText aria-label="Age"></input>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
API defines helper props, events and others for the PrimeNG InputText module.
| Name | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | When present, it specifies that the element should be disabled. |