Select
A native Select allows a user to pick an option from a list.
- To select from a list on mobile devices
- To make a selection in performance-constrained environments
- To make selection from a list in Zendesk products, use Combobox instead
How to use it
Default
Select uses a native menu 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
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Select, Field } from '@zendeskgarden/react-forms'
API
The native Select component follows this structure:
<Field><Field.Label /><Field.Hint /><Select><option /><option />{/* etc. */}</Select></Field>
Field
A Field provides accessibility attributes to the child Select field by associating it with the corresponding Field.Label and Field.Hint.
Field.Hint
Extends HTMLAttributes<HTMLDivElement>
Nest a Hint within a Field component.
Field.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 |
Field.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 SelectHTMLAttributes<HTMLSelectElement>
The Select component applies state and accessibility attributes to its children. Nest it within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | Applies inset | |
isBare | boolean | Removes borders and padding | |
isCompact | boolean | Applies compact styling | |
validation | 'success' | 'warning' | 'error' | Applies validation state styling |