Web Components ComboBox Features

The Ignite UI for Web Components ComboBox component exposes several features such as filtering and grouping.

Combobox Features Example

The following demo shows some Combo features that are enabled/disabled at runtime:

In our sample we are going to use the Switch component, so we have to import them together with the combo:

import { defineComponents, IgcComboComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcComboComponent, IgcSwitchComponent);

Then, using React’s useState hook, we will declare our variables which will update when the state of the switches change. This will keep track for updates and reflect the changes to the combo inputs accordingly:

let combo = document.getElementById('combo') as IgcComboComponent<City>;

let switchIcon = document.getElementById('caseSensitive') as IgcSwitchComponent;
let switchFilter = document.getElementById('filtering') as IgcSwitchComponent;
let switchDisable = document.getElementById('disabled') as IgcSwitchComponent;

switchIcon.addEventListener("igcChange", () => {
    combo.caseSensitiveIcon = switchIcon.checked;
});

switchFilter.addEventListener("igcChange", () => {
    combo.disableFiltering = switchIcon.disabled = switchFilter.checked;
});

switchDisable.addEventListener("igcChange", () => {
    combo.disabled = switchDisable.checked;
});

Note that grouping is enabled/disabled by setting the GroupKey property to a corresponding data source field:

let switchGroup = document.getElementById('grouping') as IgcSwitchComponent;

switchGroup.addEventListener("igcChange", () => {
    this.combo.groupKey = switchGroup.checked ? "country" : undefined;
});

Features

Filtering

By default, filtering in the ComboBox is enabled. It can be disabled by setting the DisableFiltering property.

Filtering options can be further enhanced by enabling the search case sensitivity. The case-sensitive icon can be turned on using the CaseSensitiveIcon property so that end-users can control the case sensitivity.

<igc-combo disable-filtering case-sensitive-icon></igc-combo>

Filtering Options

The Ignite UI for Web Components Combo exposes one more filtering property that allows passing configuration of both FilterKey and CaseSensitive options. The FilterKey indicates which data source field should be used for filtering the list of options. The CaseSensitive option indicates if the filtering should be case-sensitive or not.

The following code snippet shows how to filter the cities from our data source by country instead of name. We are also making the filtering case-sensitive by default:

const options = {
    filterKey: 'country',
    caseSensitive: true
};

combo.filteringOptions = options;

Grouping

Defining a GroupKey option will group the items, according to the provided key:

<igc-combo group-key="region"></igc-combo>

Sorting Direction

The ComboBox component also exposes an option for setting whether groups should be sorted in ascending or descending order. By default, the sorting order is ascending:

<igc-combo group-sorting="desc"></igc-combo>

Label

The Combo label can be set easily using the Label property:

<igc-combo label="Cities"></igc-combo>

Placeholder

A placeholder text can be specified for both the ComboBox component input and the search input placed inside the dropdown menu:

<igc-combo placeholder="Pick a city" placeholder-search="Search for a city"></igc-combo>

Autofocus

If you want your ComboBox to be automatically focused on page load you can use the following code:

<igc-combo autofocus></igc-combo>

Search Input Focus

The ComboBox search input is focused by default. To disable this feature and move the focus to the list of options use the AutofocusList property as shown below:

<igc-combo autofocus-list></igc-combo>

Required

The ComboBox can be marked as required by setting the required property.

<igc-combo required></igc-combo>

Disable ComboBox

You can disable the ComboBox using the Disabled property:

<igc-combo disabled></igc-combo>

API References

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub