Table of Contents

Select

Select allows a user to pick one option from a list. This helps simplify the UI when space is limited.

Table of Contents

How to use it
Configuration
API

Deprecated

Select does not meet Web Content Accessibility Guidelines (WCAG) requirements. Use Combobox instead.

Used for this

To make a selection from a list of options

Not for this

To filter a large list of options, use Autocomplete instead
To make multiple selections from a list, use Multiselect instead
To select from a list on mobile, use a native Select instead

How to use it

Default

Select works with the Menu component to display available options.

Disabled

A disabled Select prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not be read aloud by a screenreader.

Hidden label

Select labels can be hidden.

Hint text

Hint text gives further clarification.

Size

Select can be default or compact in size.

Validation

Show success, warning, and danger validation messages with the Message component.

Configuration

Name8.76.4•View source•View on npm
Installnpm install @zendeskgarden/react-dropdowns
Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
Importimport { Dropdown, Field, Hint, Label, Message, Select } from '@zendeskgarden/react-dropdowns'

API

The Select component follows this structure:

<Dropdown>  <Field>    <Label />    <Hint />    <Select />    <Message />  </Field>  <Menu>    <Item />    <Item />    {/* etc. */}  </Menu></Dropdown>

The Dropdown component provides state and accessibility to its consumers while enabling customization. It uses PopperJS for positioning.

Dropdown State: The Downshift library handles keyboard and accessibility logic. Provide other customizations directly to Downshift via downshiftProps. See the stateReducer pattern for a common customization strategy example.

Server Side Rendering: Server side rendering might require specific Downshift settings. The dropdowns package re-exports Downshift’s resetIdCounter utility, resetting the internal counter which is used to generate unique IDs for Downshift.

Prop name	Type	Default	Description
downshiftProps	Record<string, any>	–	Passes customization props to the Downshift component
highlightedIndex	number	–	Highlights an element at a selected index
inputValue	string	–	Sets the value of the input element
isOpen	boolean	–	Opens the dropdown
onInputValueChange		–	Handles input value change Parameters `inputValue` Value of the input element `stateAndHelpers` Downshift state and helpers
onSelect		–	Handles item selection Parameters `selectedItem` The selected item `stateAndHelpers` Downshift state and helpers
onStateChange		–	Handles state change Parameters `options` Downshift internal state changes `stateAndHelpers` Downshift state and helpers
selectedItem	any	–	Identifies the currently selected item
selectedItems	any[]	–	Identifies the currently selected items

Field

Extends HTMLAttributes<HTMLDivElement>

A Field provides accessibility attributes to the child Select field by associating it with the corresponding Label and Hint.

Hint

Extends HTMLAttributes<HTMLDivElement>

Nest a Hint within a Field component.

Label

Extends LabelHTMLAttributes<HTMLLabelElement>

Nest a Label within a Field component.

Prop name	Type	Default	Description
hidden	boolean	–	Hides the label visually without hiding it from screen readers
isRegular	boolean	–	Applies regular (non-bold) font weight

Message

Extends HTMLAttributes<HTMLDivElement>

The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.

Prop name	Type	Default	Description
validation	'success' \| 'warning' \| 'error'	–	Applies validation state styling
validationLabel	string	–	Defines the aria-label for the validation icon

Select

Extends HTMLAttributes<HTMLDivElement>

The Select component applies state and accessibility attributes to its children. Nest it within a Field component.

Prop name	Type	Default	Description
disabled	boolean	–	Indicates that the element is not interactive
focusInset	boolean	–	Applies inset `box-shadow` styling on focus
isBare	boolean	–	Removes borders and padding
isCompact	boolean	–	Applies compact styling
start	any	–	Defines the icon rendered before the element's content
validation	'success' \| 'warning' \| 'error'	–	Applies validation state styling