跳到主要内容
界面图谱Interface Atlas
☰
EN
组件Form

可搜索选择框

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,输入变化时重置高亮索引。

相关概念

可搭配的风格

参考来源

Markdown 版(给 Agent) · JSON