Select

v10.0.7Edit this page

Displays a select input that lets a user choose from a list of predefined options.

Usage

Loading...

Loading examples...

Props

<Select>

Renders a select component as a native or dropdown style.

Name

Description

Type

Default

options

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

array

options.*.label

node

options.*.value

number

or

string

or

bool

options.*.disabled

bool

options.*.__dangerouslyAllowLongLabel

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

bool

value

The currently selected value. Must match a provided option.

array

or

bool

or

number

or

string

error

Show the select in an error visual state.

bool

fullWidth

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

bool

disabled

Shows a disabled style.

bool

multiple

Allows selecting multiple options.

bool

id

Id attribute for select element.

string

name

Name attribute for select element.

string

onChange

Value change callback.

func

onClose

Callback on close, browser mutliselect only

func

onFocus

Focus callback.

func

onBlur

Blur callback.

func

onOpen

Callback on open, browser mutliselect only

func

defaultValue

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

string

className

Class on the <input> element.

string

Label for <Select>

You usually want a label for the select dropdown. Use InputGroup to attach a label to Select.

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