多选框组
Multi-select
别名:多选多选下拉可多选的选择框多选框multi select
这是什么
允许从一组选项中挑选多个值，并以标签形式回显已选集合的选择控件。与单选下拉不同，展开面板在选择后保持打开，已选项可逐个移除；适合标签、权限、筛选条件等需要累积多个值的表单场景。选项很多时应配合搜索。
名词辨析
「多选」口语上也可能指 checkbox 复选框本身；本词条专指带列表与标签回显的组合选择控件。
交互实验室
试一试，再决定怎么用用鼠标和键盘各完成一次多选与删除标签。
正在加载实验室…
使用时关注什么
- 01每个已选项可单独移除
- 02空状态或搜索无结果时有提示
✓ 适用场景
- 需要一次提交多个值，如标签、权限、筛选条件
- 已选项需要随时可见并可单独删除
- 选项集合固定，且可能较多、需要搜索或分组
✕ 不适用场景
- 只能选一个值，用 select 或 combobox 更准确
- 选项少于 5 个且无需回显，平铺 checkbox 更快
- 值由用户自由创造而非从列表挑选，用 tag-input
常见形式
标签回显
Chip echo
已选项以可删除标签排布在控制区内，最常见形态
复选列表
Checkbox list
选项平铺为复选框组，所见即所得
双列表
Dual listbox
左右两个列表加转移按钮，适合大量已选项的管理
实现要点
flex-wrapscroll控制区用 flex-wrap 排布标签，高度随已选项增长；列表绝对定位在下方，max-height + overflow-y-auto 控制高度。选择不关闭面板，Escape 收起，点击外部关闭。键盘在选项间移动并用 aria-selected 标注，标签的删除按钮需可聚焦。
平台 API
role="listbox"aria-multiselectablearia-selected代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| ARIA APG | Listbox (multi-select) |
| shadcn/ui | Combobox (multiple) |
| React Select | isMulti |
相关概念
用收起的单行控件承载一组互斥选项，点击展开面板后选择其一，选中值常驻显示在触发器上。 比 radio 更省空间，适合选项多于 5 个的场景；面板支持滚动、分组或搜索，选择即关闭。
组件替代方案把文本输入和候选选项组合在一起的选择组件。用户可以输入关键词缩小范围，再通过鼠标或键盘确定一个值。输入文本、当前高亮项和最终选中值是不同状态；当没有匹配项时，应解释结果并允许清空重选。它适合选项较多、用户又可能记得部分名称的场景。
组件替代方案在文本框里回车或输入分隔符，就把当前内容固化成一枚可删除的标签（chip），标签在框内横向排列， 输入光标始终停在末尾。兼顾「自由输入」与「逐项管理」，常用于收件人、话题标签、文件名与 过滤条件。Backspace 删最后一枚，点 × 删指定项。
组件相似概念容易混淆
select 是互斥单选，多选框组累积多个值并以标签回显
combobox 强调输入检索并提交单值，多选框组强调集合管理