Select
下拉选择器
WebMobileDesktop上手难度: 中等
一个框，点开后向下展开一列选项，选完就收起。
Live Demo
真的可以点你刚才看到的这个：表单里的「请选择城市」、Excel 的单元格下拉、各类设置里的下拉选择框。
它到底是什么
Select 是「空间换清晰度」的组件：收起时只占一行高度，展开时所有选项可看。选项少于 5 个时直接用 Radio 比它更好——因为 Select 要点两次。
下拉菜单selectdropdown选择器下拉框select box
Anatomy · 它由什么组成
Trigger触发框
显示当前值 + ChevronDown
Menu弹出层
跟随触发框定位
Option选项
高 40px，选中项加 Check
Search选项内搜索
选项多时必备
Group选项分组
用分隔线分组
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 选项超过 5 个，全部列出太长 | 用 |
| 选项之间是平级的 | 用 |
| 需要搜索（选项 20+） | 用 |
| 选项少于 5 个 | 不用 |
| 需要多选 | 不用 |
移动端的原生 Select 会调起系统选择器，体验与 Web 差异大，注意适配。
选完一个值后需要用户理解「为什么改变了界面」时，Select 缺少上下文说明。
Similar Patterns
别搞混一句话区分：一个框，点开后向下展开一列选项，选完就收起。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个城市选择下拉框：选项 30+ 个，展开后顶部有搜索框，已选项显示在触发框里并带 Check 标记。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个可以选的下拉框。
改成这样说
加 Select：button[aria-haspopup=listbox] 作触发框，菜单 role=listbox + 选项 aria-selected，↑↓/Enter/Esc 键盘可用，选项多时加搜索框，靠近屏幕底部时菜单向上翻转。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。