IconField

IconField wraps an input and an icon.

Import #


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

Basic #

A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property that the default value is right and also left option is available.


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

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

Accessibility #

Screen Reader

IconField and InputIcon does not require any roles and attributes.

Keyboard Support

Components does not include any interactive elements.