下拉选择
Select
别名:下拉选择下拉框选择器下拉列表下拉选项框select 下拉
这是什么
用收起的单行控件承载一组互斥选项，点击展开面板后选择其一，选中值常驻显示在触发器上。 比 radio 更省空间，适合选项多于 5 个的场景；面板支持滚动、分组或搜索，选择即关闭。
交互实验室
试一试，再决定怎么用打开选项列表并切换值，比较原生与自定义选择方式。
正在加载实验室…
使用时关注什么
- 01选中值应在关闭后继续清楚展示。
- 02选项过多时考虑可搜索选择框。
✓ 适用场景
- 选项数量多于 5 个且互斥单选
- 表单空间有限，需要收起选项列表
- 选项可分组或较长（国家、时区、分类）
✕ 不适用场景
- 选项少于 5 个，直接平铺 radio 更快
- 选项很多且需要键盘快速检索，用可搜索的下拉或命令面板
- 允许多选时需明确多选语义，避免误用单选下拉
常见形式
原生
Native
系统控件，移动端体验最好
自定义面板
Custom panel
可完全定制样式与分组
多选
Multiple
以标签（chip）呈现已选集合
实现要点
position: absolutemax-height: overflowz-index: 10transition触发器样式与输入框一致，右侧 chevron 随展开旋转；面板绝对定位于触发器下方， max-height + overflow-y-auto 控制高度。键盘用 aria-expanded / role="listbox" / role="option" 与 aria-selected 标注，Escape 关闭、点击外部关闭。 多选时点击不关闭，已选项以 chip 展示。
平台 API
<select>role="listbox"role="option"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
相关概念
由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
组件相似概念点击或右键触发的临时操作列表浮层：平铺或分组的命令项，选中即执行并关闭。 用于收纳非高频操作（更多、设置、删除），通常以「⋯」按钮或右键唤起。
组件相似概念用一组圆形按钮表示互斥选项，同组内只能选中一个且不可取消。 与复选框的核心区别是多选与单选；选中圆点用填充动画反馈， 选项少（2～5 个）时平铺展示比下拉选择效率更高。
组件相似概念在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式搭配使用用快捷键（⌘K / Ctrl+K）唤出的浮动搜索面板：输入即筛选命令、页面或内容， 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野， 现在是效率工具和开发者产品的标配。
组件相似概念