可搜索选择框
Combobox
别名:可以搜索的下拉框输入筛选选项自动补全选择autocomplete
这是什么
把文本输入和候选选项组合在一起的选择组件。用户可以输入关键词缩小范围,再通过鼠标或键盘确定一个值。输入文本、当前高亮项和最终选中值是不同状态;当没有匹配项时,应解释结果并允许清空重选。它适合选项较多、用户又可能记得部分名称的场景。
交互实验室
试一试,再决定怎么用输入一个关键词筛选风格,用方向键与 Enter 选择,再尝试无结果和清空。
正在加载实验室…
使用时关注什么
- 01键盘高亮必须指向仍存在的候选项。
- 02清空后恢复全部选项,Esc 只关闭列表。
✓ 适用场景
- 从较多城市、成员或风格中选择已知选项。
- 需要在输入中快速筛选并保留明确选中值。
✕ 不适用场景
- 只有两三个选项,使用 radio 更直接。
- 允许任意输入且没有候选数据,使用普通输入框。
常见形式
可输入筛选
Editable
键入关键词过滤候选项。
只选不输
Select only
选项固定,通过菜单选择。
实现要点
position: relativeoverflow-y: auto:focus-visible焦点留在输入框,用 aria-activedescendant 指向当前选项。配合 aria-expanded、aria-controls、listbox 和 option 表达结构。支持方向键、Enter、Escape,输入变化时重置高亮索引。
相关概念
输入框Input
用一条带边框的水平输入区收集单行文本,是表单的基本单元。 占位符提示期望格式,聚焦时高亮边框引导视线,校验失败时切换错误色 并附提示文案;可内嵌前后缀图标与清除按钮,受控管理输入值。
组件相似概念下拉选择Select
用收起的单行控件承载一组互斥选项,点击展开面板后选择其一,选中值常驻显示在触发器上。 比 radio 更省空间,适合选项多于 5 个的场景;面板支持滚动、分组或搜索,选择即关闭。
组件相似概念命令面板Command Palette
用快捷键(⌘K / Ctrl+K)唤出的浮动搜索面板:输入即筛选命令、页面或内容, 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野, 现在是效率工具和开发者产品的标配。
组件相似概念