IconField

IconField is an extension to standard input element with theming and keyfiltering.

Import#


import { IconField } from 'primereact/iconfield';
import { InputIcon } from 'primereact/inputicon';

Basic#

IconField is used as a controlled input with value and onChange properties.


<IconField iconPosition="left">
    <InputIcon className="pi pi-search"> </InputIcon>
    <InputText placeholder="Search" />
</IconField>

<IconField>
    <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
    <InputText />
</IconField>

Template#

IconField is used as a controlled input with value and onChange properties.


<IconField iconPosition="left">
    <InputIcon>
        <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g mask="url(#mask0_2642_713)">
                <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="..."
                    fill="var(--primary-color)"
                />
            </g>
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="..."
                fill="var(--primary-color)"
            />
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path fillRule="evenodd" clipRule="evenodd" d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
        </svg>
    </InputIcon>
    <InputText placeholder="Search" />
</IconField>

Accessibility#

Screen Reader

IconField and InputIcon does not require any roles and attributes.

Keyboard Support

Components does not include any interactive elements.

SUMMER SALE2025

Use coupon code PRSM25 at checkout to get 50% OFF everything in PrimeStore and PrimeBlocks.

Learn More