Select
下拉选择
Aliases:下拉选择下拉框选择器下拉列表下拉选项框select 下拉
What is it
A collapsed single-line control holding a set of mutually exclusive options; expanding the panel reveals them and the chosen value stays on the trigger. More space-efficient than radios, suited to more than 5 options; the panel can scroll, group or search, and picking one closes it.
Interactive playground
Try it. Make an informed choice.Open the list, change the value and compare selection variants.
Loading lab…
What to look for
- 01Keep the selected value visible after closing.
- 02Consider a combobox for a large option set.
✓ When to use
- More than 5 mutually exclusive options
- Tight form space — options must stay collapsed
- Long or groupable option sets like countries, timezones, categories
✕ When not to use
- Fewer than 5 options — visible radios are faster
- Many options needing quick search — use a searchable select or command palette
- Multi-select semantics must be explicit — do not disguise it as single select
Variants
Native
原生
OS control — best on mobile
Custom panel
自定义面板
Fully styleable with grouping
Multiple
多选
Selected set shown as chips
Implementation
position: absolutemax-height: overflowz-index: 10transitionStyle the trigger like an input with a chevron rotating when open; the panel is absolutely positioned below with max-height and overflow-y-auto. Mark up with aria-expanded, role="listbox", role="option" and aria-selected; close on Escape and outside click. In multi-select, clicks stay open and selections render as chips.
Platform API
<select>role="listbox"role="option"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
Related concepts
A menu of actions popping near its trigger to tuck away secondary operations and keep the interface tidy — the classic form being a "···" more button. The panel floats over content with a shadow; picking an item executes and closes, and destructive actions sit isolated below a divider in red.
ComponentsSimilarA temporary overlay listing actions, opened by click or right-click: flat or grouped command items that execute and close on selection. It houses infrequent actions (more, settings, delete), usually behind a "⋯" button or a context click.
ComponentsSimilarA set of circular buttons for mutually exclusive options — exactly one selected per group, never unset. The core contrast with checkboxes is single versus multi selection; the dot fills with animation on select, and with 2–5 options a visible radio group beats a dropdown.
ComponentsSimilarChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed withA floating search panel summoned with ⌘K / Ctrl+K: type to filter commands, pages or content, navigate with arrow keys, execute with Enter. Popularized by macOS Spotlight; now standard in power-user products.
ComponentsSimilar