Component size, gzipped: 72kb

Select

API

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.

Note: by default, id and label are default properties that Select components look for in options array objects. To adapt to custom properties, use the labelKey and valueKey to override the defaults.

Examples

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 with grouped options

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.

API

Select props

NameTypeDescription
aria-describedby
string
Sets the aria-describedby attribute.
aria-label
string
Sets the aria-label attribute.
aria-labelledby
string
Sets the aria-describedby attribute.
autoFocus
boolean
Defines if select element is focused on the first mount.
backspaceRemoves
boolean
Defines if options can be removed by pressing backspace.
clearable
boolean
Defines if the select value can be cleared. If true a clear icon is rendered when a value is set.
closeOnSelect
boolean
Defines if the menu closes after a selection if made.
creatable
boolean
Defines if new options can be created along with choosing existing options.
deleteRemoves
boolean
Defines if options can be removed by pressing backspace.
disabled
boolean
Defines if the control is disabled.
error
boolean
Defines if the control is in error state.
escapeClearsValue
boolean
Defines if the value is cleared when escape is pressed and the dropdown is closed.
filterOptions
function
A custom method to filter options to be displayed in the dropdown.
filterOutSelected
boolean
Defines if currently selected options are filtered out in the dropdown options. Only for `multi` select.
getOptionLabel
function
A custom method to get a display value for a dropdown option.
getValueLabel
function
A custom method to get a display value for a selected option.
id
string
Sets the id attribute of the internal input element. Allows for usage with labels.
isLoading
boolean
Defines if the select is in a loading (async) state.
labelKey
string
Defines an option key name for a default label value.
maxDropdownHeight
string
Sets max height of the dropdown list.
mountNode
ref
Where to mount the popover.
multi
boolean
Defines if multiple options can be selected.
noResultsMsg
react node
Message to be displayed if no options is found for a search query.
onBlur
function
Called the onBlur event triggers.
onBlurResetsInput
boolean
Defines if the input value is reset to an empty string when a blur event happens on the select.
onChange
function
Change handler of the select to be called when a value is changed.
onClose
function
A function that is called when the dropdown closes.
onCloseResetsInput
boolean
Defines if the input value is reset to an empty string when dropdown is closed.
onFocus
function
Called the onFocus event triggers.
onInputChange
function
Change handler of the search input.
onOpen
function
A function that is called when the dropdown opens.
onSelectResetsInput
boolean
Defines if the input value is reset to an empty string when a selection is made.
openOnClick
boolean
Defines if the dropdown opens on a click event on the select.
options
array
Options to be displayed in the dropdown. If an option has a disabled prop value set to true it will be rendered as a disabled option in the dropdown.
overrides
custom
Lets you customize all aspects of the component.
placeholder
string
Sets the placeholder.
positive
boolean
Defines if the control is in positive state.
required
boolean
Defines if the select field is required to have a selection.
searchable
boolean
Defines if the search functionality is enabled.
size
enum
Defines the size (scale) of dropdown menu items. See the Menu component API.
startOpen
boolean
If true, opens the dropdown when the select mounts.
type
enum
Defines type of the component to be in a select or search mode. When set to TYPE.search the search icon is rendered on the left and the select arrow icon is not rendered.
value
array
A current selected value(s). If a selected value has a clearableValue prop set to true it will be rendered as a disabled selected option that can't be cleared.
valueKey
string
/** Defines a key name for an option's unique identifier value. The value of the 'valueKey' prop is used to identify what options are selected or removed from the selection, it also used for default filtering out the selected options from the dropdown list.

Select exports

You can import this module like so:

import {Select} from 'baseui/select'

It exports the following components or utility functions: