Skip to content

Select

Status: Stable

Latest released: January 2020

Current version: v10.5.12

Storybook
GitHub

Select components present a list of options for the user to choose from. The option selected influences or changes the experience. Typically users can select a single option from the list, but the multi-select version allows user to select several options.


Best practices

  • Use a balance of radio, card select, and select components to help users make choices and provide info with ease.
  • Use clear and concise language for all labels.
  • Use help messaging to further clarify what the input is asking, never use icons for this purpose.
  • Ensure error messaging adds specific instructions on how to resolve an error.

Variants

Default

Error

Disabled


Development

import Select from '@nerdwallet/react-select';
<Select />;

Props

<Select>

options

Array<Object>

An array of options `[{ value, label }]`. See example.

Array<{
label: node
value: number | string | bool
disabled: bool

/**

Silence the maxLineLength error to allow a label > 21 characters. Generally only used in instances where copy or compliance requires them.

*/

__dangerouslyAllowLongLabel: bool
}>

value

Array | boolean | number | string

The currently selected value. Must match a provided option.


error

boolean

Show the select in an error visual state.


label

string

Optional label for the select.


errorMessage

node

Optional text to be shown indicating the user is in an error state.


helpMessage

node

Optional help text shown below the input.


tooltip

node

Optional tooltip shown via an icon next to the label.


tooltipPlacement

'top' | 'right' | 'bottom' | 'left'

Positioning of tooltip.


fullWidth

boolean

When true, sets width to 100% on the input.


disabled

boolean

Shows a disabled style.


multiple

boolean

Deprecated

Allows selecting multiple options. @deprecated


id

string

Required

Id attribute for select element.


name

string

Name attribute for select element.


onChange

Function

Value change callback.


onClose

Function

Callback on close, browser mutliselect only


onFocus

Function

Focus callback.


onBlur

Function

Blur callback.


onOpen

Function

Callback on open, browser mutliselect only


defaultValue

string

The initial value when state is uncontrolled. Must match a provided option.


className

string

Class on the <input> element.


dangerouslyForceFocusStyling

boolean

Force the component to use its focus styles.


dangerouslyForceHoverStyling

boolean

Force the component to use its hover styles.