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<{/**
Silence the maxLineLength error to allow a label > 21 characters. Generally only used in instances where copy or compliance requires them.
*/
__dangerouslyAllowLongLabel: boolvalue
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.
Default
null
errorMessage
node
Optional text to be shown indicating the user is in an error state.
Default
null
helpMessage
node
Optional help text shown below the input.
Default
null
tooltip
node
Optional tooltip shown via an icon next to the label.
Default
null
tooltipPlacement
'top' | 'right' | 'bottom' | 'left'
Positioning of tooltip.
Default
null
fullWidth
boolean
When true, sets width to 100% on the input.
disabled
boolean
Shows a disabled style.
multiple
boolean
Allows selecting multiple options.
id
string
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.