标签与多值输入
Tags Input / Token Field
把用户录入的多个值变成可浏览、编辑和移除的独立项。
最多 5 个标签，每个最多 12 字
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'tag-input'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
关键词、收件对象或自由标签。
什么时候不用
完全固定的候选集合可以使用多选 Select。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "添加标签" |
name | "sample-tag" |
placeholder | "输入后按 Enter" |
value | ["交互","设计"] |
maxTags | 5 |
maxLength | 12 |
disabled | false |
undoLabel | "撤销" |
事件
ui:change ui:remove ui:restore ui:undo
INTERACTION NOTES
交互与可访问性
- 删除按钮有具体名称。
- 键盘可在文本输入与标签之间移动。
和相似组件的区别
Tags Input 管理多个值；Badge 只显示附属信息。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验