Select

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

Select controlled example

Things to note in the Select Controlled example:

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

Select with overridden menu

Select with custom labels

Select with many options

Select similar to native select

Select creatable

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

Select creatable multi-pick

Select in a modal dialog

Overrides

Additionally, you can fully customize any part of the Select through the overrides prop. The Select consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Select API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

StatefulSelectContainer API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>