跳到主要内容
前端术语库

UI 组件 · 表单输入

标签输入框

Tag Input

也叫：标签输入、多值输入框、关键词输入框、Tags Input、Chip Input、Input Tag

能输入多个短词的输入框：敲一个词按回车，它就变成框里的一个小标签，接着输入下一个，点标签上的 ✕ 就删掉。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在商品编辑表单里做一个「商品标签」输入框：宽度撑满表单列，最小高度 36px；已添加的标签显示成 24px 高的灰色小胶囊，右侧带 ✕，最后一个标签后面紧跟光标，可以继续输入。按回车或逗号生成标签，退格删除最后一个；粘贴「新品,夏季,纯棉」自动拆成三个。输入时下方弹出匹配的已有标签和它们的使用次数，最后一项是「创建“xxx”」。最多 10 个、每个不超过 12 个字；重复时让已有的那个标签闪一下并提示「已添加」。输入框下方一行灰字「回车或逗号确认 · 已添加 3/10」。标签多时自动换行。

发给

01判断

你的内容是这样吗？

对照两列，确认标签输入框是不是你要找的。

符合这些情况，用标签输入框

  • 给文章、商品、项目打标签，允许用户自己起新词
  • 一次填好几个邮箱、手机号、域名、IP 这类短值
  • 搜索或筛选时输入多个关键词，每个关键词可以单独删掉

是这些情况，换成别的

  • 只能从固定选项里选（城市、部门），用多选的下拉选择，不要允许随便填

    改用下拉选择

  • 只需要填一个值，用普通输入框

    改用输入框

  • 每一项还要填好几个字段（例如联系人要姓名加电话），用可以增删行的表单

    改用表单

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    回车后没有生成标签，所有词挤在一个框里用逗号隔开，想删一个得小心翼翼地选中文字

  2. 02

    没有已有标签的建议，同一个意思被建成「设计」「UI设计」「ui 设计」好几个

  3. 03

    标签多了输入框横向滚动，前面加过的标签被藏起来看不到

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一个可以换行的输入容器、容器里已添加的标签（每个带删除按钮）、末尾的文字光标和下方的建议列表组成，常在下方显示数量限制。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个输入框里横排着几个带 ✕ 的小胶囊，最后面是闪烁的光标
  2. 2输入时下方弹出一列建议词，最后一项常是「创建 xxx」
  3. 3标签多了输入框会变高，自动换到第二行

04解释

详细解释

标签输入框用来填一组短词：文章标签、商品关键词、技能、收件人邮箱、允许访问的域名。用户在框里打字，按回车或逗号，刚才的文字就变成框里的一个 标签（带 ✕ 的小胶囊），光标停在后面继续输入；按退格可以删掉最后一个标签。输入时下方常弹出已有标签的建议，避免「设计」「UI设计」「ui 设计」各建一个。

它和多选的 下拉选择 长得很像，框里都是一个个小标签。区别在选项从哪来：多选下拉只能从固定的列表里挑；标签输入框允许用户自己造新词，同时可以给出建议。它和 标签 的关系是：标签是展示用的小胶囊，标签输入框是生成和编辑这些标签的输入控件。

规则要写清楚：用什么键确认（回车、逗号、空格）、最多几个、每个多长、能不能重复。重复或格式不对（比如邮箱写错）时不要默默吞掉，要高亮提示。粘贴「设计, 前端, 增长」这样一串时自动拆成多个标签。标签多了框要自动换行变高，不要横向滚动把前面的藏起来。

开发者信息
术语 ID
component-tag-input
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .el-input-tag
  • .arco-input-tag
  • .t-tag-input
  • .n-dynamic-tags
  • [class*="MuiAutocomplete-root"]:has([class*="MuiAutocomplete-tag"])
  • .tagify
  • .react-tagsinput
  • .ReactTags__tags
  • .bootstrap-tagsinput
  • .vue-tags-input
  • .ti-input
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • tag-input
  • tags-input
  • input-tag
  • tag-editor
  • tags-editor
  • tag-field
  • tags-field
  • chip-input
  • chips-input
  • keyword-input
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • TagInput
  • TagsInput
  • InputTag
  • ChipInput
  • TagEditor
  • DynamicTags
  • TagField
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30