Component size, gzipped: 62kb



The select and search controls allow the user to select an option or options.

Select menus in Base hover atop of a selection menu while providing a simple list of options. Proper spacing, color, and a check-mark are clear indicators of a selection. Each menu is scrollable, if applicable.


Select basic usage

Things to note in the example source code:

  • the value is always an Array to provide a consistent interface - no matter if you use multi or single selects,
  • you have to call setState with the entire object, not just the id value.

When type is 'search' a magnifying glass icon will be rendered to the input's left and a dropdown arrow will not be rendered to the right.

Select with custom labels

Select creatable

The creatable select enables users to create new options along with choosing existing options.

Select creatable multi-pick

Select sizes

Select similar to native select

Select uncontrolled example

Select with many options

Select in a modal dialog

Select with overridden menu

Select dropdown overrides

To override the Popover that's being used by the Dropdown subcomponent, you have to use a nested override.

Select exports

You can import this module like so:

import {Select} from 'baseui/select'

It exports the following components or utility functions: