SelectMenu shares most of its behaviour, appearance and API with the
DropdownMenu. Rather than accepting children you must provide
options as an
onChange handler and a
The single select is used for setting enumerable values when filtering data. It
is not to be used in forms, where an actual input element is required;
SelectMenu is unopinionated in how many items are selected in the list, or
how you manage selected options. Pass an array to the
value prop to select
You may disable options where appropriate.
isFilterable property to allow the user to search for items within
the menu. We recommend only introducing filter behaviour when the expected
option count is greater than 6.
defaultOptions to pin options to the top of the menu. This can help users
find common options.
You can provide an alternate item renderer.
onClear in addition to the
onChange handler to let the user clear
all the values with one click.
There's a few strategies for displaying the value within the button.
The most user friendly approach is to display as much information as possible to the user within your space constraints. In the example below we show up to 2 values, then when there's more than two we show the first selected value and the remaining count.
You may want to highlight the selected value through font-weight and/or colour.
When horizontal space is at a premium you may want to display the count in a notification badge.