Docs

Docs

Combo Box

Combo Box allows the user to choose a value from a filterable list of options presented in an overlay.

Combo Box supports lazy loading and can be configured to accept custom typed values. An example of a Combo Box where users can choose a country from a list is shown in the code here:

const countries = [
  { 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. This is done with the addition of allowCustomValue inside the <ComboBox /> element, as shown in the example here:

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

Allowing custom entry is useful when you want to present the most common choices, but still give users the ability to enter their own values.

Usage as Autocomplete Field

As the user is typing in a Combo Box, it filters out options that don’t match. Once the user sees the correct value, they can use the Up/Down arrow keys to navigate the list, followed by the Enter key to set the value. Essentially, by this method, they’re using the Combo Box as an autocomplete field of sorts.

Important
 You can find more information in the corresponding article on vaadin.com.