标签输入
Tag Input
别名:标签输入标签框打标签的输入框chips 输入token inputtag box
这是什么
在文本框里回车或输入分隔符，就把当前内容固化成一枚可删除的标签（chip），标签在框内横向排列， 输入光标始终停在末尾。兼顾「自由输入」与「逐项管理」，常用于收件人、话题标签、文件名与 过滤条件。Backspace 删最后一枚，点 × 删指定项。
交互实验室
试一试，再决定怎么用输入几个词按回车成标签，用 Backspace 删最后一枚，再点 × 删指定项。
正在加载实验室…
使用时关注什么
- 01每枚标签都有可达的移除入口
- 02输入与标签在同一容器内，光标始终可继续输入
✓ 适用场景
- 多值输入且每项可单独删除（收件人、标签、过滤词）
- 选项集合开放，允许用户创造新值
- 需要在输入过程中一眼看清「已经选了什么」
✕ 不适用场景
- 选项固定且数量少（用 select 或 radio）
- 只需要一个短文本（用普通 input）
- 需要对选项排序或分组（用 multi-select 或 transfer）
常见形式
自由输入
Free-form tags
回车即成标签，不校验词表
自动补全
Autocomplete tokens
边输入边从候选中补全，仍可自创新值
文件名标签
File-name chips
展示已选文件名，仅可移除不可编辑
实现要点
flexflex-wrapgapborder-radius: 9999px容器是一块「看起来像输入框」的 flex-wrap 区，标签用圆角胶囊排在前面，真实 input 撑开 剩余宽度。回车 / 逗号 / 失焦时提交去重后的值；Backspace 在输入为空时删除最后一枚。 删除按钮用 button 而非纯图标 span，移除后 aria-live 播报「已移除 xx」。自动补全变体 在容器下方绝对定位候选列表，键控上下键移动高亮。
平台 API
<input>role="listbox"aria-livekeydown代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| MUI | Autocomplete (multiple) |
| React Select | Multi value |
| AntD | Select mode="tags" |
相关概念
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件相似概念把文本输入和候选选项组合在一起的选择组件。用户可以输入关键词缩小范围，再通过鼠标或键盘确定一个值。输入文本、当前高亮项和最终选中值是不同状态；当没有匹配项时，应解释结果并允许清空重选。它适合选项较多、用户又可能记得部分名称的场景。
组件相似概念附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件搭配使用允许从一组选项中挑选多个值，并以标签形式回显已选集合的选择控件。与单选下拉不同，展开面板在选择后保持打开，已选项可逐个移除；适合标签、权限、筛选条件等需要累积多个值的表单场景。选项很多时应配合搜索。
组件搭配使用