The 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.

The SelectMenu builds on top of the Popover component and uses react-tiny-virtual-list for the rendering of the virtualized list of options.

This example shows basic usage with a single selected item.

Select name...

The title and default filter can be removed via the hasFilter and hasTitle props, respectively.

Select name...

You can make the size of a SelectMenu custom via the width and height properties.

Select name...

You can change the position of SelectMenu by changing its position property to Position.TOP, Position.TOP_LEFT, Position.TOP_RIGHT, Position.BOTTOM, Position.BOTTOM_LEFT, or Position.BOTTOM_RIGHT,

Select name...

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.

Select option...

It's possible to include icons in the menu list.

Select option...

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.

Select multiple...

You can attach a callback handler for the search filter via the onFilterChange property.

Filter value: 
Select name...

This example shows basic usage for disabling some options. Options that are disabled cannot be clicked and their labels are muted.

Select name...

This example shows how one should use the titleView property to pass in a custom title.

Select name...

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 none.

Select name...