Select Menu

The Select Menu component allows selection of multiple items from a dropdown list.

DetailsProperties

Introduction

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.

Implementation details

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

Single selected item

This example shows basic usage with a single selected item.

Remove title and filter

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

Change the height and width

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

Change the popover position

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,

Empty view

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.

Multiselect with deselect example

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.

Attaching a callback for when the filter changes

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

Filter value:

Disabled options

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

Custom Title Example

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

Custom Filter PlaceHolder and Icon

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.