Source: https://primeng.org/inputtext

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

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.

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

Float Label #

FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.

Over LabelIn LabelOn Label

<p-floatlabel> <input pInputText id="over_label" [(ngModel)]="value1" autocomplete="off" /> <label for="over_label">Over Label</label> </p-floatlabel>

<p-floatlabel variant="in">
    <input pInputText id="in_label" [(ngModel)]="value2" autocomplete="off" />
    <label for="in_label">In Label</label>
</p-floatlabel>

<p-floatlabel variant="on">
    <input pInputText id="on_label" [(ngModel)]="value3" autocomplete="off" />
    <label for="on_label">On Label</label>
</p-floatlabel>

Ifta Label #

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

Username

<p-iftalabel> <input pInputText id="username" [(ngModel)]="value" autocomplete="off" /> <label for="username">Username</label> </p-iftalabel>

Sizes #

InputText provides small and large sizes as alternatives to the standard.

<input pInputText [(ngModel)]="value1" type="text" pSize="small" placeholder="Small" /> <input pInputText [(ngModel)]="value2" type="text" placeholder="Normal" /> <input pInputText [(ngModel)]="value3" type="text" pSize="large" placeholder="Large" />

Fluid #

The fluid prop makes the component take up the full width of its container when set to true.

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

Help Text #

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

UsernameEnter your username to reset your password.

<div class="flex flex-col 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>

Filled #

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

Disabled #

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

<input pInputText [disabled]="true" [(ngModel)]="value" />

Invalid #

The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms.

<input pInputText [(ngModel)]="value1" [invalid]="!value1" placeholder="Name" /> <input pInputText [(ngModel)]="value2" [invalid]="!value2" variant="filled" placeholder="Name" />

Forms #

Template Driven

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex flex-col gap-4 w-full sm:w-56"> <div class="flex flex-col gap-1"> <input pInputText type="text" id="username" placeholder="Username" name="username" [(ngModel)]="user.username" #username="ngModel" [invalid]="username.invalid && (username.touched || exampleForm.submitted)" required /> @if (username.invalid && (username.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple">Username is required.</p-message> } </div> <div class="flex flex-col gap-1"> <input pInputText type="email" id="email" name="email" placeholder="Email" [(ngModel)]="user.email" #email="ngModel" required email [invalid]="email.invalid && (email.touched || exampleForm.submitted)" /> @if (email.invalid && (email.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple"> @if (email.hasError('required')) { Email is Required. } @if (email.hasError('email')) { Please enter a valid email. } </p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Reactive Forms

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4 w-full sm:w-56"> <div class="flex flex-col gap-1"> <input pInputText type="text" id="username" placeholder="Username" formControlName="username" [invalid]="isInvalid('username')" /> @if (isInvalid('username')) { <p-message severity="error" size="small" variant="simple">Username is required.</p-message> } </div> <div class="flex flex-col gap-1"> <input pInputText type="email" id="email" placeholder="Email" formControlName="email" [invalid]="isInvalid('email')" /> @if (isInvalid('email')) { @if (exampleForm.get('email')?.errors?.['required']) { <p-message severity="error" size="small" variant="simple">Email is required.</p-message> } @if (exampleForm.get('email')?.errors?.['email']) { <p-message severity="error" size="small" variant="simple">Please enter a valid email.</p-message> } } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

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

• Import

• Basic

• Float Label

• Ifta Label

• Sizes

• Fluid

• Help Text

• Filled

• Disabled

• Invalid

• Forms

  • Template Driven

  • Reactive Forms

• Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek