React Single Selection ComboBox

    The React ComboBox supports single-selection mode and quick filtering of the list of items via the main input prompt. Users can quickly type in the item they are looking for and be presented with a list of options. Upon pressing the enter key, the first highlighted match will be selected.

    React Single Selection Example

    To enable single-selection and quick filtering, set the singleSelect property on the ComboBox component. The user experience and keyboard navigation will mostly stay the same, but instead of having to type in your search query into a special filtering box above the list of options, the main input box will be used.

    <IgrCombo singleSelect></IgrCombo>
    tsx

    EXAMPLE
    DATA
    TSX
    CSS

    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.

    Selection API

    The selection API for a ComboBox with the singleSelect property applied mostly remains the same, however, there are some important differences compared to ComboBoxes that don't have this property set.

    The main difference is that only one item can be selected at any time. For example, if you have specified a valueKey for your combo component, passing more than one item to the select/deselect methods will have no effect. This also means that any previously selected items will automatically get deselected upon making a new selection.

    Here's how to select/deselect an item programmatically in a single selection combo.

    Selecting items:

    // select the item matching the 'BG01' value of the value key field.
    comboRef.current.select('BG01');
    tsx

    To deselect an item without making a new selection, call the deselect method.

    Deselecting items:

    // deselect the item matching the 'BG01' value of the value key field.
    comboRef.current.deselect('BG01');
    tsx
    Ignite UI for React | CTA Banner

    Disabled features

    Naturally, some configuration options will have no effect in a single selection ComboBox.

    Placeholder

    Assigning a value to the placeholderSearch property will yield no result since the filtering input that usually is placed above the list of options will not be present in a single selection ComboBox.

    Autofocusing the list of options

    Setting the autofocusList option on a single selection ComboBox will also have no effect.

    Keyboard Navigation

    The keyboard navigation should behave the same as with a non-single selection ComboBox, except for the fact that now the main input plays the role of a filtering prompt and so all keyboard actions that apply to the filtering/search input are moved to the main input prompt.

    Other Features

    All other features will behave the same as in a non-single selection ComboBox component.

    API Reference

    Additional Resources