IconField

IconField wraps an input and an icon.

Import #


import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';

Basic #

IconField wraps the InputIcon and the input field component.


<IconField>
    <InputIcon class="pi pi-search" />
    <InputText v-model="value1" placeholder="Search" />
</IconField>

<IconField>
    <InputText v-model="value2" />
    <InputIcon class="pi pi-spin pi-spinner" />
</IconField>

Template #

Custom content inside an InputIcon is defined as children.


<IconField>
    <InputIcon>
        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="..." fill="var(--p-primary-color)" />
            <path d="..." fill="var(--text-color)" />
        </svg>
    </InputIcon>
    <InputText v-model="value" 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.