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
Defines if select element is focused on the first mount.
backspaceRemoves
Defines if options can be removed by pressing backspace.
clearable
Defines if the select value can be cleared. If true a clear icon is rendered when a value is set.
closeOnSelect
Defines if the menu closes after a selection if made.
creatable
Defines if new options can be created along with choosing existing options.
deleteRemoves
Defines if options can be removed by pressing backspace.
disabled
Defines if the control is disabled.
error
Defines if the control is in error state.
escapeClearsValue
Defines if the value is cleared when escape is pressed and the dropdown is closed.
filterOptions
A custom method to filter options to be displayed in the dropdown.
filterOutSelected
Defines if currently selected options are filtered out in the dropdown options. Only for `multi` select.
getOptionLabel
A custom method to get a display value for a dropdown option.
getValueLabel
A custom method to get a display value for a selected option.
id
Sets the id attribute of the internal input element. Allows for usage with labels.
isLoading
Defines if the select is in a loading (async) state.
labelKey
Defines an option key name for a default label value.
maxDropdownHeight
Sets max height of the dropdown list.
mountNode
Where to mount the popover.
multi
Defines if multiple options can be selected.
noResultsMsg
Message to be displayed if no options is found for a search query.
onBlur
Called the onBlur event triggers.
onBlurResetsInput
Defines if the input value is reset to an empty string when a blur event happens on the select.
onChange
Change handler of the select to be called when a value is changed.
onClose
A function that is called when the dropdown closes.
onCloseResetsInput
Defines if the input value is reset to an empty string when dropdown is closed.
onFocus
Called the onFocus event triggers.
onInputChange
Change handler of the search input.
onOpen
A function that is called when the dropdown opens.
onSelectResetsInput
Defines if the input value is reset to an empty string when a selection is made.
openOnClick
Defines if the dropdown opens on a click event on the select.
options
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
Lets you customize all aspects of the component.
placeholder
Sets the placeholder.
positive
Defines if the control is in positive state.
required
Defines if the select field is required to have a selection.
searchable
Defines if the search functionality is enabled.
size
Defines the size (scale) of dropdown menu items. See the Menu component API.
startOpen
If true, opens the dropdown when the select mounts.
type
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
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
/** 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: