低代码平台表单设计器 unione form editor 组件介绍--标签输入
在企业级低代码表单开发中，标签输入组件是一款兼具"多选便捷性与输入灵活性"的基础组件，与多选组件功能相近，均支持多选项选择，但标签输入组件更侧重"可视化标签管理+手动新增选项"，无需依赖固定选项列表，既能选择预设选项，也能手动输入新增标签，广泛应用于文章标签、商品分类、兴趣爱好、关键词输入等场景。unione-form-editor 标签输入组件，依托丰富的专属配置，支持标签新增、删除、排序、检索，兼顾多选的便捷性与输入的灵活性，无需编码即可适配从简单标签收集到复杂关键词管理的全场景，彻底解决多选组件"无法手动新增选项、标签管理繁琐"的痛点，下面详细拆解其核心属性与专属能力。
一、组件属性Tab页：标签交互全场景适配，灵活又高效
组件属性Tab页延续同系列组件的"基础属性+表单验证+功能属性+事件设置"四大模块，重点结合标签输入组件"多选+手动新增"的核心特性，对比多选组件优化配置项，新增标签管理、输入规则等专属配置，既保持操作一致性，又精准匹配标签输入的特殊需求，兼顾易用性与专业性，新手也能快速上手配置。
1. 基础属性：定义组件核心标识与基础信息
与同系列组件（含多选组件）基础配置保持一致，同时结合标签输入场景优化提示与标识，明确标签输入用途，降低用户操作疑问，贴合标签可视化特点：
-
控件名称：组件的显示名称，用于设计界面快速识别，如"标签输入""关键词标签""商品标签""兴趣标签"，与多选组件区分开；
-
字段名称：数据存储的唯一标识，需遵循大写字母、数字和下划线组成的规则，且不能是数据库关键字，示例中可配置为"TAG_INPUT""KEYWORD""PRODUCT_TAG""HOBBY_TAG"等，用于关联后端标签数组类型字段；
-
字段标题：表单中向用户展示的标签文本，如"输入关键词标签""选择/新增商品分类""添加兴趣标签"，明确告知用户可选择或手动新增标签；
-
默认值：支持设置初始标签列表（如预设常用标签"科技、教育、娱乐"），用户可直接使用、删除或新增，类似多选组件的默认选中项，但支持更灵活的标签管理；
-
输入提示：标签输入框的辅助提示文本，引导用户操作，如"输入内容按回车新增标签，点击标签删除""可选择预设标签，也可手动输入新增"；
-
控件提示/帮助信息：额外的说明文字，可用于补充标签输入规则、数量限制、格式要求等，如"标签长度不超过10字，最多添加5个，支持中文、英文、数字"，降低用户操作疑问。
2. 表单验证：标签输入合规性强保障
参考多选组件的验证逻辑，针对标签输入组件"可手动新增"的特性，新增标签格式、重复校验等专属配置，确保输入的标签符合业务规范，避免无效、重复标签录入，保障数据准确性：
-
是否必填：开启后用户必须添加至少一个标签，否则表单无法提交，适用于关键词、分类标签等核心必填场景，与多选组件必填逻辑一致；
-
标签数量校验：专属核心配置，支持设置最小标签数量（如至少1个）和最大标签数量（如最多5个），超过限制自动提示，避免标签过多或过少，适配不同业务需求；
3. 功能属性：标签专属交互与配置优化
作为标签输入组件的核心亮点，功能属性模块在多选组件基础上，新增标签管理、输入方式、检索筛选等专属配置，兼顾多选便捷性与输入灵活性，覆盖绝大多数企业级标签输入场景，贴合标签组件的核心交互逻辑：
-
是否只读/禁用/隐藏：灵活控制组件的交互状态，如预览模式下，仅显示已添加标签、不可新增或删除；审批流程中，标签输入组件禁用，仅可查看；
-
显示标题：控制字段标题是否在表单中显示，适配紧凑布局或无标题表单设计；
4. 事件设置：标签联动与动态交互逻辑
继承同系列组件（含多选组件）的事件能力，针对标签输入组件"新增、删除、排序"的核心交互，优化联动逻辑，实现表单的动态响应，满足复杂业务中的标签联动需求：
-
变化事件：标签列表发生变化（新增、删除、排序、联动修改）时触发，可用于更新表单相关数据（如显示当前标签数量、校验标签合规性），与多选组件的变化事件逻辑一致；
-
动态标题：根据业务逻辑动态修改字段标题，如根据表单类型，将标题切换为"商品标签输入""文章关键词""兴趣标签添加"；
-
禁用/显示/必填事件：通过条件判断控制组件的禁用、显示/隐藏、必填状态，如当表单类型为"预览"时，标签输入组件禁用；当选择"需要添加标签"时，组件必填；
-
所有事件均支持代码编辑，可自定义业务逻辑，也可开启"显示代码"查看事件配置详情，灵活适配复杂标签联动场景（如跨组件标签同步、动态调整标签数量限制）。
二、组件样式Tab页：多端适配与界面美化
与同系列组件保持一致的样式配置体系，同时适配标签输入组件的界面特性（如标签框、输入框、删除图标），结合标签可视化设计要点，确保表单整体风格统一，兼顾实用性与美观度：
-
多端显示：支持单独配置组件在PC端、移动端是否显示，标签框、输入框在移动端自动适配屏幕宽度，优化触摸点击、拖拽体验，避免标签过小难以操作，同时适配标签换行显示；
-
栅格显示：基于24栅格系统，可调节组件在表单中的宽度占比（范围2-24），灵活适配不同布局，如标签输入组件可设置为占比24，独占一行，方便标签换行展示，提升操作便捷性；
-
标题宽度/控件宽度：自定义字段标题和标签输入框的宽度，适配表单整体排版，避免标题过长或输入框过宽/过窄影响操作与美观；
-
Class名称：支持自定义CSS类名，可通过外部样式文件对组件进行深度美化，如修改标签颜色、输入框边框样式、删除图标大小，适配企业品牌化设计需求，打造与产品风格统一的标签外观；
-
标签样式细化：支持设置标签的内边距、边框样式、颜色渐变，设置标签文本的字体大小、颜色，优化标签与输入框的间距，让界面更美观、更易识别，同时可设置标签hover效果，提升交互体验。
结语
unione-form-editor 标签输入组件，以"多选便捷+输入灵活"为核心，既延续了同系列多选组件的易用性，又针对标签管理场景新增了手动新增、标签拖拽、分隔符设置等专属功能，无需编写复杂代码，即可快速搭建从简单标签收集到复杂关键词管理的各类场景。相较于传统多选组件，它更灵活、更贴合标签输入的实际需求，无论是文章标签、商品分类，还是关键词输入、兴趣收集，都能轻松应对，有效提升表单交互体验与标签录入的灵活性、规范性。
作为低代码平台的核心组件，unione-form-editor 始终以"高效、灵活、易用"为核心，除了完善的标签输入组件，还提供丰富的表单组件、可视化拖拽设计、复杂交互配置等能力，助力开发者快速搭建企业级表单。
目前项目已在GitHub、Gitee开源，欢迎前往点亮Star，获取完整源码、查看详细教程，参与社区共建，一起打造更强大的低代码表单设计工具！
GitHub项目地址 ：https://github.com/unione-cloud/unione-form-editor
Gitee项目地址 ：https://gitee.com/unione-cloud/unione-form-editor