IconField wraps an input and an icon.
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';
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 class="pi pi-search"> </InputIcon>
<InputText v-model="value1" placeholder="Search" />
</IconField>
<IconField>
<InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
<InputText v-model="value2" />
</IconField>
Custom content inside an InputIcon is defined as children.
<IconField iconPosition="left">
<InputIcon>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--primary-color)" />
<path d="..." fill="var(--text-color)" />
</svg>
</InputIcon>
<InputText v-model="value" placeholder="Search" />
</IconField>
IconField and InputIcon does not require any roles and attributes.
Components does not include any interactive elements.
API defines helper props, events and others for the PrimeVue IconField module.
IconField wraps an input and an icon.
Defines valid properties in IconField component.
Defines valid slots in IconField component.
| name | parameters | returnType | description | |
|---|---|---|---|---|
| default | VNode<RendererNode, RendererElement, Object>[] | Default slot for content. |
Defines the custom interfaces used by the module.
Custom passthrough(pt) option method.
| name | type | default | description |
|---|---|---|---|
| instance | any | null | Defines instance. |
| props | IconFieldProps | null | Defines valid properties. |
| attrs | any | null | Defines valid attributes. |
| parent | any | null | Defines parent options. |
| global | undefined | object | null | Defines passthrough(pt) options in global config. |
Custom passthrough(pt) options.
| name | type | default | description |
|---|---|---|---|
| root | IconFieldPassThroughOptionType | null | Used to pass attributes to the root's DOM element. |
| hooks | ComponentHooks | null | Used to manage all lifecycle hooks. |
Custom passthrough attributes for each DOM elements
Defines the custom types used by the module.
| values |
|---|
| IconFieldPassThroughAttributes | (options: IconFieldPassThroughMethodOptions) => undefined | string | null | undefined |
InputIcon displays an icon.
Defines valid properties in InputIcon component.
Defines valid slots in InputIcon component.
| name | parameters | returnType | description | |
|---|---|---|---|---|
| default | VNode<RendererNode, RendererElement, Object>[] | Custom default template. |
Defines the custom interfaces used by the module.
Custom passthrough(pt) option method.
Custom passthrough(pt) options.
| name | type | default | description |
|---|---|---|---|
| root | InputIconPassThroughOptionType | null | Used to pass attributes to the root's DOM element. |
| hooks | ComponentHooks | null | Used to manage all lifecycle hooks. |
Custom passthrough attributes for each DOM elements
Defines the custom types used by the module.
| values |
|---|
| InputIconPassThroughAttributes | (options: InputIconPassThroughMethodOptions) => undefined | string | null | undefined |