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.

Usage

<Select
label="Account type"
options={[
{
value: '',
label: 'Pick one',
disabled: true,
},
{
value: 'checking',
label: 'Checking',
},
{
value: 'savings',
label: 'Savings',
},
]}
/>

Loading examples...

<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.

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

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.

Best Practices

Check out the Input Best Practices for properties like casing, placeholder, etc.

Auxiliary Components and Utilities

There are several other components available to utilize, but likely you should only need to access them via Select props.

NativeSelect

This component just renders a native select component styled with a DropdownTrigger. By default, this is the component used by Select.

DropdownTrigger

This component houses the basic styles for the face of a select component, generating consistent borders, size, and UI elements. Used by NativeSelect and DropdownSelect.

getPointerType

This utility function determines what type of primary pointer the user's device has. The following values are returned:

  • UNKNOWN_POINTER (default): server-side will always be unknown.
  • COARSE_POINTER: touch devices, console browsers, and devices that are less precise with hitting targets.
  • FINE_POINTER: mouse-driven devices.
  • NO_POINTER: A device without any pointing device.

Maintainers

This component is maintained by the FEI team.

See Also