React ComboBox Features
The Ignite UI for React ComboBox component exposes several features such as filtering and grouping.
Combobox Features Example
The following demo shows some ComboBox
features that are enabled/disabled at runtime:
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
In our sample we are going to use the IgrSwitch
component, so we have to register it together with the combo:
import { IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrComboModule.register();
IgrSwitchModule.register();
tsx
Then, we will add event handlers to all switch components so that we can control the combo features by toggling the switches:
const comboRef = useRef<IgrCombo>(null);
const switchCaseSensitiveRef = useRef<IgrSwitch>(null);
const disableFiltering = (switchComponent: IgrSwitch) => {
comboRef.current.disableFiltering =
switchCaseSensitiveRef.current.disabled = switchComponent.checked;
};
const showCaseSensitiveIcon = (switchComponent: IgrSwitch) => {
comboRef.current.caseSensitiveIcon = switchComponent.checked;
};
const disableCombo = (switchComponent: IgrSwitch) => {
comboRef.current.disabled = switchComponent.checked;
};
tsx
Note that grouping is enabled/disabled by setting the groupKey
property to a corresponding data source field:
const enableGrouping = (switchComponent: IgrSwitch) => {
comboRef.current.groupKey = switchComponent.checked ? "country" : undefined;
};
tsx
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.
<IgrCombo disableFiltering="true" caseSensitiveIcon="true"></IgrCombo>
tsx
Filtering Options
The Ignite UI for React ComboBox
component 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
};
comboRef.current.filteringOptions = options;
tsx
Grouping
Defining a groupKey
option will group the items, according to the provided key:
<IgrCombo groupKey="region" />
tsx
The groupKey property will only have effect if your data source consists of complex objects.
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:
<IgrCombo groupSorting="desc" />
tsx
Label
The IgrCombo
label can be set easily using the label
property:
<IgrCombo label="Cities" />
tsx
Placeholder
A placeholder text can be specified for both the ComboBox component input and the search input placed inside the dropdown menu:
<IgrCombo placeholder="Pick a city" placeholderSearch="Search for a city" />
tsx
Autofocus
If you want your ComboBox to be automatically focused on page load you can use the following code:
<IgrCombo autofocus="true" />
tsx
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:
<IgrCombo autofocusList="true" />
tsx
Required
The ComboBox can be marked as required by setting the required property.
<IgrCombo required="true" />
tsx
Disable ComboBox
You can disable the ComboBox using the disabled
property:
<IgrCombo disabled="true" />
tsx