Skip to main content
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
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 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.42.0•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

Dropdown

Prop nameTypeDefaultDescription
downshiftProps
object–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>

Hint

Extends HTMLAttributes<HTMLDivElement>

Label

Extends LabelHTMLAttributes<HTMLLabelElement>

Prop nameTypeDefaultDescription
isRegular
boolean–Applies regular (non-bold) font weight

Message

Extends HTMLAttributes<HTMLDivElement>

Prop nameTypeDefaultDescription
validation
VALIDATION–Applies styles based on validation state

Select

Extends HTMLAttributes<HTMLDivElement>

Prop nameTypeDefaultDescription
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
VALIDATION–Defines the element's validation state