FORM & INPUT
标签输入框Tag Input
在输入框内生成可删除的胶囊标签，适合输入一组同类短文本。
效果预览
适合用在哪
技能标签、兴趣选择、产品属性、邮件收件人、分类管理。
不适合：标签需要长篇描述或带复杂元信息的场景；标签数量可能超过 20 个时，输入框会变得难以阅读，改用多选下拉或表格管理。
和相近模式的区别
自动补全输入Combobox / Autocomplete
Combobox 是从下拉选项单选；Tag Input 是用户自由输入生成多个标签，也可以结合 Combobox 做「从推荐生成标签」。
容易踩的坑
- 逗号、回车、空格都生成标签，用户想输入带空格的标签时一直被切断。
- 标签数量没有上限，输入框被无限撑高，破坏表单布局。
- 删除按钮只有 10px，触屏用户很难点中。
设计提示词 · Prompt
标签输入框（Tag Input）：外层容器是白底圆角输入框（圆角 10-12px、1px 描边、min-height 40-48px），内部 flex-wrap 排列已生成的胶囊标签 + 一个无边框透明输入框。每个标签：胶囊形，右侧带 × 删除按钮；整行 hover 时标签高亮。回车、逗号或空格生成标签；Backspace 在空输入时删除最后一个标签。限制标签数或字符数时给底线提示。
Tag Input: a white rounded input container (10-12px radius, 1px stroke, min-height 40-48px) with flex-wrap layout inside. Existing tags are pill-shaped chips with light brand background and brand text, each with a 14px × remove button on the right. A borderless transparent input sits after the tags with placeholder "Type and press Enter…". Pressing Enter, comma, or space converts current text to a tag; Backspace when empty removes the last tag. Show a disabled state and hint when max count is reached.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="tag-input"><span class="tag-input__tag">React<em>×</em></span><input class="tag-input__field" placeholder="添加标签…"></div> */
.tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; }
.tag-input__tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: #4338ca; font: 13px/1 system-ui, sans-serif; }
.tag-input__tag em { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 999px; background: #c7d2fe; color: #4338ca; font-style: normal; font-size: 10px; cursor: pointer; }
.tag-input__field { flex: 1; min-width: 80px; height: 28px; border: 0; background: transparent; outline: 0; font: 14px/1 system-ui, sans-serif; }
演示 HTML 结构
<div class="s d-center">
<div class="form-tags">
<span class="form-tags__tag">React<em>×</em></span>
<span class="form-tags__tag">TypeScript<em>×</em></span>
<span class="form-tags__tag">Tailwind<em>×</em></span>
<input class="form-tags__in" placeholder="添加标签…" readonly>
</div>
</div>
常见问题
Tag Input 的无障碍名称怎么写？
给外层容器加 aria-label="技能标签"，已生成的标签用 aria-describedby 关联；每个删除按钮加 aria-label="删除 React"，不要把整个标签作为焦点目标。
逗号和回车都生成标签会冲突吗？
不会，但要在提示文案里明确告诉用户「按回车或逗号生成标签」，并把输入中的逗号替换为空格再分割，避免中文逗号全角半角问题。
常见搭配
同一页面里经常和「标签输入框」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。