IconField

IconField wraps an input and an icon.

⌘+K

preview

Usage#

import { IconField } from '@primereact/ui/iconfield';

<IconField.Root>
    <IconField.Inset />
</IconField.Root>

Examples#

Basic#

An input field with an embedded leading or trailing icon.

basic-demo

import { Search } from '@primeicons/react/search';
import { Spinner } from '@primeicons/react/spinner';
import { IconField } from '@primereact/ui/iconfield';
import { InputText } from '@primereact/ui/inputtext';

export default function BasicDemo() {
    return (
        <div className="flex flex-wrap justify-center gap-4">
            <IconField.Root>
                <IconField.Inset>
                    <Search />
                </IconField.Inset>
                <InputText placeholder="Search" />
            </IconField.Root>
            <IconField.Root>
                <InputText variant="filled" />
                <IconField.Inset>
                    <Spinner className="animate-spin" />
                </IconField.Inset>
            </IconField.Root>
        </div>
    );
}

Float Label#

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

Over Label

In Label

On Label

float-label-demo

'use client';
import { FloatLabel } from '@primereact/ui/floatlabel';
import { IconField } from '@primereact/ui/iconfield';
import { InputText } from '@primereact/ui/inputtext';
import { Label } from '@primereact/ui/label';
import * as React from 'react';
import { Search } from '@primeicons/react/search';

export default function FloatLabelDemo() {
    const [value1, setValue1] = React.useState('');
    const [value2, setValue2] = React.useState('');
    const [value3, setValue3] = React.useState('');

    return (
        <div className="flex flex-wrap justify-center items-end gap-4">
            <FloatLabel>
                <IconField.Root>
                    <IconField.Inset>
                        <Search />
                    </IconField.Inset>
                    <InputText
                        value={value1}
                        onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)}
                        id="over_label"
                        autoComplete="off"
                    />
                </IconField.Root>
                <Label htmlFor="over_label">Over Label</Label>
            </FloatLabel>

            <FloatLabel variant="in">
                <IconField.Root>
                    <IconField.Inset>
                        <Search />
                    </IconField.Inset>
                    <InputText
                        value={value2}
                        onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)}
                        id="in_label"
                        autoComplete="off"
                        variant="filled"
                    />
                </IconField.Root>
                <Label htmlFor="in_label">In Label</Label>
            </FloatLabel>

            <FloatLabel variant="on">
                <IconField.Root>
                    <IconField.Inset>
                        <Search />
                    </IconField.Inset>
                    <InputText
                        value={value3}
                        onInput={(e: React.FormEvent<HTMLInputElement>) => setValue3(e.currentTarget.value)}
                        id="on_label"
                        autoComplete="off"
                    />
                </IconField.Root>
                <Label htmlFor="on_label">On Label</Label>
            </FloatLabel>
        </div>
    );
}

Ifta Label#

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

ifta-label-demo

'use client';
import { IconField } from '@primereact/ui/iconfield';
import { IftaLabel } from '@primereact/ui/iftalabel';
import { InputText } from '@primereact/ui/inputtext';
import { Label } from '@primereact/ui/label';
import * as React from 'react';
import { Check } from '@primeicons/react/check';
import { Envelope } from '@primeicons/react/envelope';

export default function IftaLabelDemo() {
    const [value, setValue] = React.useState('');

    return (
        <div className="flex justify-center">
            <IftaLabel>
                <IconField.Root>
                    <IconField.Inset>
                        <Envelope />
                    </IconField.Inset>
                    <InputText
                        id="email"
                        value={value}
                        onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}
                        autoComplete="off"
                        variant="filled"
                    />
                    <IconField.Inset>
                        <Check />
                    </IconField.Inset>
                </IconField.Root>
                <Label htmlFor="email">Email</Label>
            </IftaLabel>
        </div>
    );
}

Clickable#

Icons inside IconField.Inset can be interactive with event handlers like onClick.

clickable-demo

'use client';
import { IconField } from '@primereact/ui/iconfield';
import { InputText } from '@primereact/ui/inputtext';
import * as React from 'react';
import { Search } from '@primeicons/react/search';
import { Times } from '@primeicons/react/times';

export default function ClickableDemo() {
    const [value, setValue] = React.useState('PrimeReact');

    return (
        <div className="flex flex-wrap justify-center gap-4">
            <IconField.Root>
                <IconField.Inset>
                    <Search />
                </IconField.Inset>
                <InputText value={value} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)} placeholder="Search" />
                <IconField.Inset>
                    <Times className="cursor-pointer" onClick={() => setValue('')} />
                </IconField.Inset>
            </IconField.Root>
        </div>
    );
}

Sizes#

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

sizes-demo

import { Lock } from '@primeicons/react/lock';
import { Search } from '@primeicons/react/search';
import { Spinner } from '@primeicons/react/spinner';
import { User } from '@primeicons/react/user';
import { IconField } from '@primereact/ui/iconfield';
import { InputText } from '@primereact/ui/inputtext';

export default function SizesDemo() {
    return (
        <div className="flex flex-col items-center gap-4">
            <IconField.Root>
                <IconField.Inset>
                    <Search />
                </IconField.Inset>
                <InputText placeholder="Small" size="small" />
            </IconField.Root>

            <IconField.Root>
                <InputText placeholder="Normal" />
                <IconField.Inset>
                    <User />
                </IconField.Inset>
            </IconField.Root>

            <IconField.Root>
                <IconField.Inset>
                    <Lock />
                </IconField.Inset>
                <InputText placeholder="Large" size="large" />
                <IconField.Inset>
                    <Spinner className="animate-spin" />
                </IconField.Inset>
            </IconField.Root>
        </div>
    );
}

Accessibility#

IconField.Root and IconField.Inset do not require any roles and attributes.

Keyboard Support#

Component does not include any interactive elements.