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.
Allow the users to search for items within the menu. We recommend only introducing filter behaviour when the expected option count is greater than 6.
FilterMenu shares most of the
SelectMenu API, with a few additions to
manage filtering -- checkout the API tab to learn more.
FilterMenu has no opinions about how you filter the options, whether it's
client or server side. If you fetch options
onInputChange, you must show the
user that it
isLoading. We recommend using
debounce (or similar) to
Provide alternative properties in your options using the
itemToLabel utilities. Map complex objects to the required
data select-menu requires while using other properties in the
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.