Select

For making one selection from a large list of options.

If you need to fetch options for the select as the interacts with the select, please use the AsyncSelect.


options
autocomplete
multiselect
menuIsOpen
onMenuOpen
onMenuClose
onInputChange
noOptionsMessage
components
closeMenuOnSelect

Variations

MultiSelect

Give users the ability to select multiple options with the multiselect. Note that the value will now be represented as an Array rather than a string.

Replacing Inner Components

Using the components prop you can augment the inner components of the select. See the following example of adding a component to each option in the dropdown:

List of All Replaceable components

Here is a list of all the available components that can be overidden and customized

Object KeyComponent NameDescription
OptionSelectOptionIndividual options in the select's dropdown
ControlControlWraps the select field
MultiValueSelectMultiValueThe selected options in a muliselect select
ClearIndicatorSelectClearIndicatorThe clear button in the multiselect
SelectContainerSelectContainerThe wrapper around the whole field and dropdown
MenuSelectMenuThe wrapper around the dropdown options
InputSelectInputThe typeable input in the select

Props

NameTypeDefaultDescription

options

array

Required

The options available to be selected, containing a value and a label

autocomplete

boolean

true

Whether or not typing will filter the options list

maxHeight

string

256px

Max height of the select dropdown menu, content is scrollable

multiselect

boolean

Whether or not multiple selections can be made

value

string

Value of input, used when controlling the component, an array when using the multiselect

defaultValue

string

Default value of input, an array if multiselect

menuIsOpen

boolean

Controls whether the menu is open; If unset, then NDS controls this implicitly instead

onMenuOpen

function

Event handler for when the menu is opened

onMenuClose

function

Event handler for when the menu is closed

onInputChange

function

Event handler for when the value typed into the input changes

noOptionsMessage

function

No options

A function that returns the string you you like to show up when no options are available

menuPosition

string

absolute

The CSS position value of the menu. ex: 'fixed'

components

object

Pass in an object with the keys of the component you would like to replace

closeMenuOnSelect

boolean

true

Close the select menu when the user selects an option

Related Components