Skip to content

Select

Status: Stable

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.

Examples

Default

Error

Disabled

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

Deprecated
Class on the <input> element.
@deprecated

dangerouslyForceFocusStyling

boolean

Force the component to use its focus styles.

dangerouslyForceHoverStyling

boolean

Force the component to use its hover styles.