Select

Choose one value from a bounded list.

States

defaulthoverfocusdisabledinvalid

Tokens

background	`{semantic.surface.primary}`
foreground	`{semantic.text.primary}`
border	`{semantic.border.default}`
radius	`{radius.md}`
padding	`{space.3}`
focusRing	`{semantic.focus.ring}`

Accessibility

{
  "ruleIds": [
    "STYLE-A11Y-001"
  ],
  "focusVisible": true,
  "keyboard": "Arrow keys move options; Enter commits selection.",
  "labelRequired": true
}

Do / Don't

Do

Use for bounded choices.

Don't

Do not hide critical choices in very long lists.