A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
There is not much change in this component as compared to react-aria-components's export. You can refer to the official documentation for more details.
OUI exports 3 combo-box related components:
If the combo-box does not have a visible label, an aria-label or aria-labelledby prop must be passed instead to identify it to assistive technology.
ComboBox follows the Collection Components API, accepting both static and dynamic collections. The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time.
As seen below, an iterable list of options is passed to the ComboBox using the defaultItems prop. Each item accepts an id prop, which is passed to the onSelectionChange handler to identify the selected item. Alternatively, if the item objects contain an id property, as shown in the example below, then this is used automatically and an id prop is not required.
Selected id: None
By default, items in a ComboBox are labeled by their text contents for accessibility. ComboBoxItem exposes the description prop to allow for additional help text to be associated with each item. This can be used to provide additional context or information about each item.