IconField

IconField wraps an input and an icon.

⌘+K

preview

Installation#

npx shadcn@latest add https://primereact.dev/r/iconfield.json

Usage#

import { IconField, IconFieldInset } from '@/components/ui/iconfield';

<IconField>
    <IconFieldInset />
</IconField>

Examples#

Basic#

basic-demo

import { Search, Spinner } from '@primeicons/react';
import { IconField, IconFieldInset } from '@/components/ui/iconfield';
import { InputText } from '@/components/ui/inputtext';

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

Clickable#

clickable-demo

'use client';
import { Search, Times } from '@primeicons/react';
import { IconField, IconFieldInset } from '@/components/ui/iconfield';
import { InputText } from '@/components/ui/inputtext';
import * as React from 'react';

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

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

Sizes#

sizes-demo

import { Lock, Search, Spinner, User } from '@primeicons/react';
import { IconField, IconFieldInset } from '@/components/ui/iconfield';
import { InputText } from '@/components/ui/inputtext';

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

            <IconField>
                <InputText placeholder="Normal" />
                <IconFieldInset>
                    <User />
                </IconFieldInset>
            </IconField>

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

Accessibility#

IconField and IconFieldInset do not require any roles and attributes.

Keyboard Support#

Component does not include any interactive elements.