Docs

Combo Box

Combo Box allows the user to choose a value from a filterable list of options presented in an overlay. It supports lazy loading and can be configured to accept custom typed values.
const [countries, setCountries] = useState<{ id: number, name: string }[]>();

useEffect(() => setCountries([
  { id: 1, name: 'Finland' },
  { id: 2, name: 'Germany' },
  { id: 3, name: 'United States' },
]), []);

return (
  <ComboBox
    label='Country'
    itemLabelPath='name'
    itemValuePath='id'
    items={countries}
  />
);

Common input field features

ComboBox includes all Text Field and shared input field features.

Custom value entry

Combo Box can be configured to allow entering custom values that aren’t included in the list of options.

<ComboBox
  allowCustomValue
  label='Country'
  itemLabelPath='name'
  itemValuePath='id'
  items={countries}
/>

Allowing custom entry is useful when you need to present the most common choices but still give users the freedom to enter their own options.

Usage as autocomplete field

As the user is typing, the Combo Box filters out the options that don’t match. Once the correct value has been found, the user can use the Up/Down arrow keys to navigate the list and the Enter key to set the value, essentially using the Combo Box as an autocomplete field.