Select
Select fields let users choose an option from a list
- Make sure select fields look interactive
- The select field's state (blank, with input, error, etc) should be visible at a glance
- Keep labels and error messages brief and easy to act on
- Select fields commonly appear in forms and dialogs
Example
Live Playground
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Standard Select
Responsive Layout
As layouts adapt to larger screens and different window sizes, apply flexible container dimensions to select fields. Set minimum and maximum values for margins, padding, and container dimensions as layouts scale so that typography adjusts for better reading experiences.
Select fields can span the full width of the display on compact window sizes, but should be bounded by flexible margins or other containers on medium and expanded window sizes.
On this page
import { Select, Option, OptionGroup, OptionGroupLabel, createSelectCollection} from '@cerberus/react'Usage
Customizing
You can utilize the primitive components to customize the select.
| Component | Description |
|---|---|
| SelectRoot | The context provider for the Select family |
| SelectLabel | The label that appears above the select input |
| SelectControl | The wrapper to the select trigger that opens the dropdown |
| SelectTrigger | he trigger that opens the dropdown |
| SelectValueText | The text that appears in the trigger |
| SelectIndicator | The indicator that appears in the trigger |
| SelectClearTrigger | The trigger that clears the selected value |
| SelectPositioner | The wrapper that positions the dropdown |
| SelectContent | The content of the dropdown (i.e. the container itself) |
| SelectItemGroup | The group of options in the dropdown |
| SelectItemGroupLabel | The label for the group of options |
| SelectItem | The option in the dropdown |
| SelectItemText | The text label of the option |
| SelectItemIndicator | The indicator shown when the option is selected |
API
Select
The Select component is an abstraction of our primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| label | The label to show above the select trigger. | |
| placeholder | The placeholder to show in the select trigger. | |
| size | 'md' | The size of the select. |
| collection | The collection of options to show in the dropdown. |
The Select component also accepts all the props of the SelectRoot primitive props
Option
The Option component is an abstraction of our primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| item | The item to show in the dropdown. SelectCollectionItem |
The Option component also accepts all the props of the SelectItem primitive props
OptionGroup
The OptionGroup component is an abstraction of our primitives and accepts the same props as the SelectItemGroup primitive.
OptionGroupLabel
The OptionGroupLabel component is an abstraction of our primitives and accepts the same props as the SelectItemGroupLabel primitive.
createSelectCollection
The createSelectCollection function is a utility function that creates a collection of options for the Select component.
export function createSelectCollection( collection: SelectCollectionItem[],): ListCollection<SelectCollectionItem> { return createListCollection({ items: collection, })}On this page
Use Cases
- Users should be able to:
- Navigate to and activate a select field with assistive technology
- Choose an item from the list of options
- Receive and understand supporting select and error messages
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) input |
| Enter | Opens the dropdown menu and selects the focused option |
| Esc | Closes the dropdown menu |
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
The accessibility label for a select field is typically the same as the label for the text field.
On this page