Combo Box
Use a EuiComboBox when the input has so many options that the user needs to be able to search them, the user needs to be able to select multiple options, and/or the user should have the ability to specify a custom value in addition to selecting from a predetermined list.
The combo box will have errors if any of the options you pass to it share the same label property. It’s OK if options have duplicate values, though. This is because the label is the only thing the combo box is concerned about, since this is what the user sees and what is matched against when the user searches.
Disabled
Set the prop isDisabled to make the combo box disabled.
Virtualized
EuiComboBoxList uses react-virtualized to only render visible options to be super fast no matter how many options there are.
Select or create options
Containers
This example demonstrates how the combo box works within containers. Because this component uses portals, it’s important that it works within other portal-using components.
Pill colors
Useful for visualization or tagging systems. You can also pass a color in your option list. The color can be a hex value (like #000) or any other named color value accepted by the Badge component.
Option rendering
You can provide a renderOption prop which will accept option and searchValue arguments. Use the value prop of the option object to store metadata about the option for use in this callback.
Note: virtualization (above) requires that each option have the same height. Ensure that you render the options so that wrapping text is truncated instead of causing the height of the option to change.
Groups
You can group options together. The groups won’t match against the search value.
Single selection
To only allow the user to select a single option, provide the singleSelection prop. You may want to render the selected option as plain text instead of pill form. To do this, pass singleSelection={{ asPlainText: true }}
Disallowing custom options
Leave out the onCreateOption prop to disallow the creation of custom options.
Custom options only, with validation
Alternatively, provide the noSuggestions prop to hide the suggestions list and only allow the creation of custom options.
Create some tags (letters only)
Async
Use the onSearchChange code to handle searches asynchronously. Use theisLoading prop to let the user know that something async is happening.
Search asynchronously