Combobox

Comboboxes allows the user to select one item out of a set of predefined options while also allowing text entry - it combines a dropdown with a search. Text entry is used to filter the list of options. It utilises the autocomplete mechanism.

Use when

  • The user has to select from a large predefined set, where search is needed to find the right option.
  • The user has to select from a predefined set, but more options can also be added manually.
  • The possible alternatives should be displayed to guide users towards the right one.
  • Screen real estate is limited.
  • It is not vital to see all the options at first sight.
The functionality for this component, i.e. the script, is not provided. The documentation has a demo functionality that you can draw inspiration from in your work.

Design

Single selection

See the filtering data mechanism when the data set is visible before filtering, or autocomplete for common search behaviour.

As soon as the user has started typing in the text field, an "x" icon is shown to remove the typed text and revert suggestions to those shown for an empty search string.

When the combobox is closed, it shows the selected option (if any).

You need to be able to navigate in the dropdown box with the keyboard (in the example is used: 'Arrow Down', 'Arrow Up', 'Page Up', 'Page Down', 'End', 'Home', 'Esc', and for select 'Enter').

    Multiple selection

    For the multiple selection the selected option is shown as a pill in the textbox, and after a selection, the combobox remains open.

      By adding a wrapper with .combobox-dropdown-header or .combobox-dropdown-footer class inside the .combobox-dropdown will create a header or footer zone, for additional controls.

        Disabled

        For a propper disabled state for the combobox follow the code snippet below (it is recommended to add a disabled attribute to the input as well).

        Combobox with error - validation

        For error (on validation) on the combobox you need to add .has-error class as in the code snippet below.

        Combogrid

        Combogrid allows the user to select one item out of a set of predefined options. Is similar to combobox, but contains more information in the form of more than one column and are presented as a grid instead of a list. Combogrids also allow text entry to search from a very long list of options or to add items that are not present in the list.

        ID Name Address City Country