Combo box

Also known as

Typeahead, Editable Dropdown, List Box, Autocomplete, Autosuggest
Available since

ComboBox helps users to select an item from a large list of options without scrolling. The typeahead functionality makes this selection process quicker, easier and reduces errors. Users can see a list of available options when they click on the component and then filter the list as they type. Once they’ve made their selection, it populates the field and the overlay list closes.

  • To display and select from a list of 10 or more options that don't need to be permanently visible to the user without selecting from a dropdown menu.
  • When only the selected value from a set of options needs to be visible once the selection is made.
  • If a workflow benefits from having a filter to quickly narrow down the available options.
  • If there are more than 100 options and you would like to prevent performance issues without virtualization.
  • To choose one value from a set of five to ten options that does not require filtering. Instead, use Dropdown.
  • To select a single option from fewer than five. Instead, use RadioButtonGroup.
  • To select multiple options from fewer than five. Instead, use CheckboxGroup.
  • To make an instantaneous selection between two binary choices, for example “on” and “off”. Instead, use Switch.

Note: The list will adjust to the height of its container. If you need to modify the height, you can apply a global override to the saltOptionList class to add a maximum height. Keep in mind that this will impact all other lists contained in ComboBox and Dropdown.

Just like native input elements in React, a combo box can be controlled or uncontrolled. By default a combo box is uncontrolled. Use the defaultValue and defaultSelected props to control the default value of the combo box.

If you want to control the value of the combo box, use the value and selected props. The onSelectionChange prop is required when using the controlled approach.

To import ComboBox from the core Salt package, use: