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
The Select component is a controlled component that can be used to select one option from a set. It can be used in a group with other selects to allow for multiple selections.
Grouped Options
To group options, use the OptionGroup and OptionGroupLabel components.
Primitives
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 |
| SelectHiddenInput | The native select for the select group. |
API
Select
The Select component is an abstraction of our primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| 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, })}Parts
The SelectParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The SelectRoot component which is the Provider for the family. |
| Label | The SelectLabel component which displays the label and "required" notice. |
| Control | The SelectControl component which is the visual field. |
| Trigger | The SelectTrigger component which is the trigger for the dropdown. |
| ClearTrigger | The SelectClearTrigger component which is the trigger to clear the selected value. |
| ValueText | The SelectValueText component which displays the selected value. |
| Indicator | The SelectIndicator component which displays the trigger indicator. |
| Positioner | The SelectPositioner component which is controls the positioning for the dropdown. |
| Content | The SelectContent component which is the dropdown itself. |
| ItemGroup | The SelectItemGroup component which is the group of options in the dropdown. |
| ItemGroupLabel | The SelectItemGroupLabel component which is the label for the group of options. |
| Item | The SelectItem component which is the option in the dropdown. |
| ItemText | The SelectItemText component which is the text label of the option. |
| ItemIndicator | The SelectItemIndicator component which displays based on the checked state. |
| HiddenInput | The SelectHiddenInput component which displays the native input. |
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