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 properties.


<input type="text" pInputText [(ngModel)]="value" />

Reactive Forms #

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 #

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>

Key Filter #

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" />

Sizes #

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" />

Help Text #

An advisory text can be defined with the semantic small tag.

UsernameEnter your username to reset your password.


<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>

Float Label #

A floating label appears on top of the input field when focused.

Username


<span class="p-float-label">
    <input pInputText id="username" [(ngModel)]="value" />
    <label for="username">Username</label>
</span>

Invalid #

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" />

Disabled #

When disabled is present, the element cannot be edited and focused.


<input id="disabled-input" type="text" pInputText [disabled]="true" [(ngModel)]="value" />

Style #

Name	Element
p-inputtext	Input element

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.