用途:该资料是一份标签与 token 输入(Tag & Token Input)的设计参考,面向需要让用户输入多个标签、关键词或多选项的表单场景,例如文章标签、收件人、分类选择等。
主要能力与行为:输入文字后按 Enter 或逗号即可创建标签/chip;标签以可移除的 chip 形式显示在输入框内;当输入框为空时按 Backspace 删除最后一个标签;输入过程中显示自动补全建议;点击标签上的 X 可移除该标签。
设计要点:标签在输入容器内自动换行排列;输入框随标签数量纵向增高;标签样式为圆角胶囊或带 X 按钮的圆角矩形;标签颜色保持一致,或按类别着色;可设置最大标签数量。
自动补全:输入时显示匹配的已有标签或选项;高亮匹配字符;允许创建新标签(底部提供“Create 'new-tag'”选项);输入框获得焦点但为空时显示最近使用的标签。
校验规则:防止重复标签(短暂高亮已存在的标签);限制每个标签的字符/长度;对无效标签格式给出反馈;达到最大标签数时显示提示。
适用场景:适合标签管理、多选筛选、收件人输入、分类标注等需要批量录入离散值的界面。
限制:资料未提供具体实现代码、框架、安装方式、平台支持或收费信息,暂未提供。