Source: https://primeng.org/iconfield

PassThrough Attributes just landed ✅Learn More

• SearchK

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

IconField

IconField wraps an input and an icon.

Import #

import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon';

Basic #

A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property that the default value is right and also left option is available.

<p-iconfield> <p-inputicon class="pi pi-search" /> <input type="text" pInputText placeholder="Search" /> </p-iconfield> <p-iconfield> <input type="text" pInputText /> <p-inputicon class="pi pi-spinner pi-spin" /> </p-iconfield>

Template #

An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.

<p-iconfield iconPosition="left"> <p-inputicon> <svg width="20" height="20" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="..." fill="var(--p-primary-color)" /> <path d="..." fill="var(--p-text-color)" /> </svg> </p-inputicon> <input type="text" pInputText placeholder="Search" /> </p-iconfield>

Float Label #

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

Over LabelIn LabelOn Label

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

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

<p-floatlabel variant="on">
    <p-iconfield>
        <p-inputicon class="pi pi-search" />
        <input pInputText id="on_label" [(ngModel)]="value3" autocomplete="off" />
    </p-iconfield>
    <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> <p-iconfield> <p-inputicon class="pi pi-user" /> <input pInputText id="username" [(ngModel)]="value" autocomplete="off" /> </p-iconfield> <label for="username">Username</label> </p-iftalabel>

Sizes #

IconField is compatible with the pSize setting of the input field.

<p-iconfield> <p-inputicon class="pi pi-search" /> <input pInputText [(ngModel)]="value1" placeholder="Small" pSize="small" /> </p-iconfield>

<p-iconfield>
    <input pInputText [(ngModel)]="value2" placeholder="Normal" />
    <p-inputicon class="pi pi-user" />
</p-iconfield>

<p-iconfield>
    <p-inputicon class="pi pi-lock" />
    <input pInputText [(ngModel)]="value3" placeholder="Large" pSize="large" />
    <p-inputicon class="pi pi-spin pi-spinner" />
</p-iconfield>

Accessibility #

Screen Reader

IconField and InputIcon does not require any roles and attributes.

Keyboard Support

Components does not include any interactive elements.

• Import

• Basic

• Template

• Float Label

• Ifta Label

• Sizes

• Accessibility

PrimeBlocks

490+ ready to use UI blocks crafted with PrimeNG and Tailwind CSS.

Learn More

PrimeNG 20.3.0 by PrimeTek