The Select Menu component allows selection of multiple items from a dropdown list.
SelectMenu component is an advanced interaction pattern which allows selection of multiple items from a dropdown list.
It can be used as a substitute for the native multiple select element.
SelectMenu builds on top of the
react-tiny-virtual-list for the rendering of the virtualized list of options.
This example shows basic usage with a single selected item.
The title and default filter can be removed via the hasFilter and hasTitle props, respectively.
You can make the size of a SelectMenu custom via the width and height properties.
You can change the position of
SelectMenu by changing its
position property to
It's possible to display a custom empty view instead of options list via
emptyView, when there are no properties supplied.
Note that empty view won't be shown when options are being filtered and there are no search results.
It's possible to include icons in the menu list.
This example shows usage with multiple selected items. As users click on selected values to remove them, you can update state. Note that this is just an example.
You can attach a callback handler for the search filter via the
This example shows basic usage for disabling some options. Options that are disabled cannot be clicked and their labels are muted.
This example shows how one should use the
titleView property to pass in a custom title.
It's possible to change the filter placeholder and filter icon through the filterPlaceholder and filterIcon props.
Note that the icon can be one found in Segment's various icons, or