Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
Live Demo
Actually clickableWhat you just saw:A "Select city" field in a form, the dropdown in an Excel cell, the select box in every settings screen.
What it actually is
A select trades space for clarity: collapsed it occupies a single row, expanded it shows every option at once. With fewer than 5 options, radio buttons are usually better — a select costs the user two clicks.
Anatomy · What it's made of
Trigger触发框
Shows the current value + ChevronDown
Menu弹出层
Positioned relative to the trigger
Option选项
40px tall, the selected one carries a Check
Search选项内搜索
Essential once there are many options
Group选项分组
Options grouped with dividers
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| There are more than 5 options and listing them all is too long | Yes |
| The options are peers with no hierarchy | Yes |
| The list needs to be searchable (20+ options) | Yes |
| There are fewer than 5 options | No |
| Multiple selections are needed | No |
A native select on mobile raises the system picker, which behaves very differently from the web version — plan for that gap.
When picking a value changes the interface in ways the user must understand, a select gives them no context to explain it.
Similar Patterns
Don't mix these upSelectCurrent
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
Radio Button
单选按钮
A row of circles where picking one clears the others — one choice, immediately visible.
In one line:A box that opens downward into a list of options and collapses again once you pick one.
Radio Button
单选按钮
A row of circles where picking one clears the others — one choice, immediately visible.
Segmented Control
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
Search Field
搜索框
An input box built purely for finding things, usually with a magnifier icon and a clear button.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a city select dropdown: 30+ options, a search field at the top of the expanded menu, and the chosen option shown in the trigger with a Check mark.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a dropdown you can pick from.
Say this instead
Add a Select: a button[aria-haspopup=listbox] as the trigger, a menu with role=listbox and options with aria-selected, working ↑↓/Enter/Esc keyboard support, a search field when there are many options, and a menu that flips upward near the bottom of the screen.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.