IconField

An unstyled compound component that wraps an input together with an icon.

Build inputs with embedded leading or trailing icons with complete control over layout and styling.

Features#

Compound component API with two sub-components: Root, Inset
Inset positions an icon inside the input boundary
Icons inside Inset can be interactive with event handlers like onClick
Compatible with the size setting of the input field

Usage#

import { IconField } from 'primereact/iconfield';
import { InputText } from 'primereact/inputtext';

<IconField.Root>
    <InputText />
    <IconField.Inset>
        <SearchIcon />
    </IconField.Inset>
</IconField.Root>

API#

IconFieldRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: IconFieldRootInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: IconFieldRootInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`IconFieldRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<IconFieldRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: IconFieldRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"iconfield"`
`data-part`	`"root"`

IconFieldInset#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: IconFieldInsetInstance) => undefined` \| `CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: IconFieldInsetInstance) => undefined` \| `string)`	—
The class name to apply to the component.
`as`	`null` \| `string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`IconFieldInsetInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<IconFieldInsetPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: IconFieldInsetInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Accessibility#

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

Keyboard Support#

Component does not include any interactive elements.