Select (native)
A native Select allows a user to pick an option from a list.
Used for this
- To select from a list on mobile devices
- To make a selection in performance-constrained environments
Not for this
- To make selection from a list in Zendesk products, use the custom Select dropdown 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
- Name8.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Field, Hint, Label, Message, Select } from '@zendeskgarden/react-forms'
API
Field
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
id | string | – | Sets the field ID and the prefix for the generated label, input, and hint IDs |
Hint
Extends HTMLAttributes<HTMLDivElement>
Label
Extends LabelHTMLAttributes<HTMLLabelElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | – | Applies regular (non-bold) font weight |
Message
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
validation | VALIDATION | – | Applies validation state styling |
Select
Extends SelectHTMLAttributes<HTMLSelectElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | – | Applies inset box-shadow styling on focus |
isBare | boolean | – | Removes borders and padding |
isCompact | boolean | – | Applies compact styling |
validation | VALIDATION | – | Applies validation state styling |