Docs draft
Select
Component storyFigma component set ↗React component ↗DSDS entity ↗
When to use it
useSingle choice among options that fit a native menu: sort order, language, quality.
avoidMenus with checkboxes, toggles, drilldowns, or mixed content — that is the DropdownMenu pattern, landing with the popover primitive.
menu-item + Menu.avoid2-5 options worth showing all at once.
radioStates
rest — At rest with no interaction.
hover — Pointer is over the control.
focus — Holds keyboard focus and shows the focus ring.
open below — Open with the menu attached below the trigger.
open above — Open with the menu attached above the trigger.
disabled — Not interactive; rendered with the lifted disabled tokens so it stays perceivable.
Design specifications
| trigger | 44px, radius.md, padding-x space.16 (outline: space.12), gap space.8 |
| label | type.label-lg |
| label-rest | color.text.secondary |
| label-active | color.text.primary |
| chevron | Icon / Chevron Down at 20 |
| open-surface | color.bg.elevated |
| outline-border | color.border.strong |
Accessibility
Enter / Space / Arrows — Native select semantics — the menu is the platform's.
color.text.secondary on color.bg.primary — Contracted at ≥ 4.5:1 by the build gate.
Code wraps a real select; the styled trigger never replaces platform behavior. aria-label from the label prop.