React ComboBox Templates
The Ignite UI for React ComboBox component allows defining custom templates for different areas such as items, group headers, empty list, and icons.
ComboBox Templates Example
Template Types
Item Template
The ItemTemplate is a custom template that if defined should be used when rendering items in the list of options.
type City = {
name: string;
id: string;
country: string;
};
const renderItemTemplate = (args: ComboTemplateProps<City>) => {
const item = args.item;
return (
<span>
<b>{item.name}</b> [{item.id}] - {item.country}
</span>
);
};
<IgrCombo
valueKey="id"
displayKey="name"
groupKey="country"
data={Cities}
itemTemplate={renderItemTemplate}
></IgrCombo>Group Header Template
The GroupHeaderTemplate is a custom template that if defined should be used when rendering group headers in the list of options.
<IgrCombo
valueKey="id"
displayKey="name"
groupKey="country"
data={cities}
groupHeaderTemplate={renderGroupHeaderTemplate}
></IgrCombo>
const renderGroupHeaderTemplate = (args: ComboTemplateProps<City>) => {
return (
<span>Country of {args.item.country}</span>
);
}Slots
Other than custom templates, the Ignite UI for React ComboBox component exposes several slots that allow users to pass custom content to different parts of the component. For all ComboBox slots, we recommend using a <span> element for simple text, symbols, or emojis, and an <igc-icon> component when adding icons. For the header and footer slots, you can also use more semantic elements such as <header> and <footer>.
Header Slot
To render a custom header above the list of options pass content to the header slot:
<IgrCombo>
<span slot="header">Header content goes here</span>
</IgrCombo>Footer Slot
To render a custom footer below the list of options pass content to the footer slot:
<IgrCombo>
<span slot="footer">Footer content goes here</span>
</IgrCombo>Empty List Slot
To render a custom content when the filtering operation returns no result, use the empty slot:
<IgrCombo>
<span slot="empty">¯\_(ツ)_/¯</span>
</IgrCombo>Toggle Icon Slot
The toggle icon in the combo input can also be modified via the toggle-icon slot:
<IgrCombo>
<IgrIcon slot="toggle-icon" name="down" collection="material"></IgrIcon>
</IgrCombo>Clear Icon Slot
The clear icon can be changed via the clear-icon slot:
<IgrCombo>
<IgrIcon slot="clear-icon" name="clear"></IgrIcon>
</IgrCombo>