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.
