Combo Box
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}
/>
);
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. |