Web Components ComboBox Templates

    The Ignite UI for Web Components 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.

    import { ComboItemTemplate } from 'igniteui-webcomponents';

const itemTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`
      <span><b>${item.name}</b> [${item.id}]</span>
  `;
};

combo.itemTempate = itemTemplate;

    Group Header Template

    The groupHeaderTemplate is a custom template that if defined should be used when rendering group headers in the list of options.

    import { ComboItemTemplate } from 'igniteui-webcomponents';

const groupHeaderTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`<div>Country of ${item.country}</div>`;
};

combo.groupHeaderTemplate = groupHeaderTemplate;

    Slots

    Other than custom templates, the Ignite UI for Web Components ComboBox component exposes several slots that allow users to pass custom content to different combo parts.

    Header Slot

    To render a custom header above the list of options pass content to the header slot:

    <igc-combo>
  <div slot="header">Custom header content</div>
</igc-combo>

    To render a custom footer below the list of options pass content to the footer slot:

    <igc-combo>
  <div slot="footer">Custom footer content</div>
</igc-combo>

    Empty List Slot

    To render a custom content when the filtering operation returns no result, use the empty slot:

    <igc-combo>
  <div slot="empty">¯\_(ツ)_/¯</div>
</igc-combo>

    Toggle Icon Slot

    The toggle icon in the combo input can also be modified via the toggle-icon slot:

    <igc-combo>
  <igc-icon name="down" slot="toggle-icon"></igc-icon>
</igc-combo>

    Clear Icon Slot

    The clear icon can be changed via the clear-icon slot:

    <igc-combo>
  <igc-icon name="clear" slot="clear-icon"></igc-icon>
</igc-combo>

    API Reference

    Additional Resources