COMPONENT 27 · Text & File Inputs

标签输入框

Tags Input

也叫Token FieldChip InputTag EditorNSTokenField

输入多个短值，并把每个值转换成可移除的标签。

Accepts multiple short values and turns each into a removable token.

ANATOMY & USAGE

结构与使用建议

组成部分

已添加标签
文本输入
移除按钮

适合使用

需要添加多个邮箱、关键词或分类值时。

不建议使用

只有一个值或用户必须从严格列表选择时。

键盘与无障碍

每个移除按钮包含标签名；支持键盘添加、浏览与删除，并清楚播报变化。

DESCRIBE IT TO AI

这样告诉编程助手

实现标签输入框（Tags Input）：输入多个短值，并把每个值转换成可移除的标签。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo stack">
  <label for="tag">添加标签</label>
  <div id="tag-list" class="row">
    <span class="tag">设计 <button type="button" aria-label="移除设计标签">×</button>
    </span>
  </div>
  <input id="tag" placeholder="输入后按 Enter">
</div>