组件 · 表单 · 原生 HTML 与 React
标签输入 TagInput
回车或逗号把文字变成标签；退格删掉最后一个。
演示
<div class="xxd-taginput" data-xxd-taginput><input placeholder="回车添加" aria-label="标签"></div>export function TagInputDemo() {
return <TagInput className="w-72" defaultValue={["海报"]} placeholder="回车添加" />;
}
const accents = ["墨色", "X 蓝", "湖蓝", "苔绿"];属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-taginput xxd-chip |
JS
box.addEventListener("xxd:change", (e) => e.detail.value) // 字符串数组；Xxd.addTag(box, "海报")键盘与读屏
- 每个标签的删除按钮有 aria-label（data-remove-label 可改）
- 输入框没有可见标签时写 aria-label；变化派发 xxd:change