Inputs · §10.3

Select

A full-width select with a matching popup, groups, scrolling and a check.

Size
State
Theme
Contrast
Language
Motion
Text size

Code

<Select items={items}><SelectTrigger id="zone"><SelectValue placeholder="Choose a zone" /></SelectTrigger><SelectContent>{…}</SelectContent></Select>

Accessibility

  • Full width by default; the list opens below at the trigger's width.
  • Arrow keys, Home/End and type-ahead; Escape returns focus to the trigger.
  • On the popover layer, so it never clips inside dialogs and sheets.

Usage

Do

  • Group long lists with labels.
  • Open one inside a dialog to see the layering.

Don't

  • Patient screens use lists or segmented controls instead.

Platforms

Web
apps/web/components/ui/select.tsx
iOS
SwiftUI Picker(.menu)
Android
Compose ExposedDropdownMenuBox