低代码平台表单设计器 unione form editor 组件介绍--复选组件
低代码平台表单设计器 unione form editor 组件介绍--复选组件
在企业级表单开发中，当用户需要从一组关联选项中选择"一个或多个结果"，且选项之间互不互斥时，复选组件是最贴合场景的基础控件。它区别于单选组件的“唯一选中”、开关组件的“单一状态切换”，核心特点是"多值可选、独立勾选、批量操作"，适合选项数量适中、需要明确展示所有可选项、允许用户自由组合选择的业务场景，比如兴趣爱好、权限分配、角色选择、标签勾选、业务类型多选等。
unione-form-editor 复选组件延续平台统一配置规范，深度对接静态字典、系统字典、字典接口三类数据源，支持全选/反选、父子联动、半选状态、单选项禁用、横向/纵向排布、联动交互等完整能力，配置逻辑和单选、下拉、标签等组件完全互通，无需重复学习，即可快速完成标准化多选场景搭建，同时遵循行业UI/UX设计规范，兼顾操作便捷性与视觉辨识度，下面详细拆解其核心属性与专属能力。
一、组件属性Tab页：多值选择更灵活，配置简单易上手
组件属性依旧沿用系列统一框架：基础属性 + 表单验证 + 功能属性 + 事件设置，全文围绕复选组件多值选中、父子联动、批量操作、数据源绑定的核心特性展开，配置入口、字段规则、交互逻辑和其他表单组件保持一致，新手也能零门槛快速配置。
1. 基础属性：组件标识与基础展示配置
基础属性和平台同系列输入、选择类组件规范完全统一，兼顾设计器识别、前端展示、后端数据存储三重需求，贴合复选场景多选项展示的特点：
控件名称：表单设计器内部标识名称，用于快速区分组件，如“复选组件”“兴趣复选”“权限复选”“角色复选”；
字段名称：后端数据存储唯一字段标识，遵循大写字母、数字、下划线组合规则，不可使用数据库关键字，常用配置如：CHECKBOX_LIST、PERMISSION_CHECK、ROLE_SELECT、INTERESTS、BUSINESS_TYPE，用于存储复选选中值数组；
字段标题：表单前端展示给用户的标签文案，如“兴趣爱好”“权限分配”“选择角色”“业务类型”“关联标签”；
默认值：设置表单加载时自动选中的多个选项，支持绑定多个选项值，如默认选中“阅读”“运动”、默认选中“查看权限”“编辑权限”，减少用户手动勾选成本；
输入提示：组件辅助提示文案，引导用户理解选择规则，如“可选择多个选项”“支持全选/反选操作”；
控件提示/帮助信息：补充说明业务规则，如“选项可多选、可全不选，互不影响”“勾选父选项将自动选中所有子选项”，降低用户理解成本，明确复选与单选、开关组件的使用差异[1]。
2. 表单验证：多选结果合规性强保障
针对复选组件可多选、可全不选的核心规则，结合业务场景做针对性校验控制，杜绝无效提交、非法数据录入、选择数量异常等问题：
是否必填：开启后用户必须选择至少一个选项，未选择时表单无法提交，适用于权限分配、角色选择、业务类型等必填多选场景；
选择数量校验：复选组件核心校验配置，支持设置最小选择数量（如至少选择2个）、最大选择数量（如最多选择5个），避免选择过多或过少，适配不同业务需求；
选项合法性校验：仅允许选择预设字典内的合法选项，禁止手动篡改提交值，保证前后端数据一致，同时校验选中选项是否为可用状态[2]；
自定义校验规则：支持扩展特殊业务校验，如“必须选择至少一个核心权限”“不可同时选择互斥选项”“所选选项需属于同一分类”；
错误提示：自定义校验失败文案，如“请至少选择一个选项”“最多选择5个选项”“不可选择互斥选项，请重新勾选”“该选项不可选中，请重新选择”；
触发机制：支持选项勾选/取消时、表单提交时触发校验，实时反馈结果，兼顾交互流畅性与数据规范性。
3. 功能属性：复选组件专属核心配置
功能属性聚焦复选组件的展示、数据源、选中控制、批量操作、交互体验做专项设计，既保持和平台字典体系互通，又突出复选独有的全选、父子联动、半选状态等能力，完全贴合企业实际使用场景，遵循行业交互规范[1]：
数据源配置：延续平台统一字典规范，支持三类数据源无缝切换，和单选、下拉、级联、下拉树配置逻辑完全一致： 支持选项排序、字段映射，适配不同后端返回格式（如配置label、value、disabled等属性），选项加载稳定不乱序[2]。
静态字典：手动添加固定选项，设置选项名称、选项值、排序序号，适合兴趣爱好、固定权限等不变枚举场景；
系统字典：直接复用平台内置公共字典数据，无需重复维护，适合角色、权限、通用标签等通用基础数据多选；
字典接口：对接后端接口动态获取选项，实时同步最新业务数据，适合选项会动态更新的多选场景；
展示布局配置：复选核心差异化配置，支持横向排布和纵向排布两种模式，遵循UI设计规范[1]：
横向排布：选项并排展示，占用空间少，适合3-5个短文本选项，如简单标签、基础权限勾选；
纵向排布：选项垂直展示，阅读更清晰，适合选项文字较长、选项数量稍多的场景，避免换行错乱，提升可读性；
全选/反选配置：复选核心便捷操作，支持开启“全选按钮”，点击可一键选中所有可选选项、一键取消所有选中选项，大幅提升多选项勾选效率；同时支持“反选”功能，快速切换已选/未选状态，适配选项数量较多的场景；
父子联动配置：复选组件核心增强能力，开启后实现父子选项自动关联，遵循行业通用交互规范[1]：
勾选父选项，自动全选所有子选项；
取消父选项，自动取消所有子选项；
子选项仅部分被勾选时，父选项自动显示“半选状态”，清晰展示部分选中效果，点击半选的父选项，自动全选所有子项；
支持独立关闭父子关联，实现父子选项独立勾选，互不影响。
默认选中配置：支持设置多个默认选中项，表单初始化时自动回显，支持清空默认值，适配不同页面初始状态；
单选项禁用：支持对指定选项单独设置禁用，被禁用选项只可查看、不可勾选，适用于部分选项仅做展示、不允许选择的场景，比如已过期权限、下架标签、无权限选项[2]；
边框样式设置：支持给选项添加边框展示，把纯文字复选升级为卡片式复选，视觉更突出、点击区域更大，提升移动端操作体验；
能否取消选中：支持设置是否允许取消已勾选状态，开启后可再次点击取消单个选项勾选，或通过全选按钮取消所有勾选，实现“勾选—取消”灵活控制；
是否只读/禁用/隐藏：全局控制组件交互状态，比如流程审批后仅展示已勾选结果、不可修改；满足某条件时隐藏整个复选组件；
显示标题：控制字段标题是否展示，适配简洁表单、无标题表单、行内紧凑布局；
4. 事件设置：复选联动与动态交互扩展
继承平台统一事件体系，针对复选勾选/取消、全选/反选、父子联动的核心交互做适配，方便实现表单内跨组件联动，满足复杂业务逻辑，支持多种事件触发与自定义扩展[2]：
变化事件：用户勾选/取消单个选项、点击全选/反选时立即触发，为复选最常用联动事件，可用于：
勾选特定选项时，显示对应表单项；取消勾选时，隐藏对应表单项；
根据勾选数量，动态切换其他组件的选项范围、校验规则；
勾选后自动赋值、计算、接口查询等联动逻辑，如勾选权限后，联动显示权限关联的操作项。
动态标题：根据表单其他字段或业务条件，动态修改组件标题文案；
禁用/显示/必填事件：根据其他组件值，动态控制当前复选组件是否显示、是否必填、是否可编辑；
所有事件支持可视化配置与自定义代码扩展，可直接获取当前选中值数组、选中文本、选项来源、勾选状态等参数，复杂逻辑无需从头开发，同时支持清除校验、设置禁用状态等操作[2]。
二、组件样式Tab页：多端适配，展示更整洁
沿用全系列组件统一样式规范，针对复选横向/纵向排布、选项间距、边框样式、半选状态图标做专项适配，保证PC端与移动端展示统一、表单整体风格协调，贴合复选组件视觉识别需求[1]：
多端显示：支持分别配置PC端、移动端显隐，自动适配不同终端布局，横向选项在移动端自动换行，不挤压、不溢出；半选状态、全选按钮在移动端适配触摸操作，提升使用体验；
栅格显示：基于24栅格系统灵活设置宽度占比，短选项复选可占用较小宽度，多选项场景建议独占一行，保证选项展示完整；
标题宽度/控件宽度：自定义标题与控件区域宽度，适配整体表单排版，避免标题过长、布局错乱；
Class名称：支持自定义样式类名，可深度修改选中颜色、禁用颜色、边框样式、文字大小、选项间距，适配企业品牌UI规范；同时可修改半选状态图标、全选按钮样式，提升视觉辨识度[1]；
布局样式优化：支持调整选项间距、对齐方式、选中图标样式、半选图标样式，区分普通态、选中态、禁用态、半选态视觉效果，整体简洁清爽、辨识度高，符合UI/UX设计规范[1]。
结语
复选组件是企业级表单设计器中实现"多值选择、批量操作"的核心基础组件，它填补了单选组件“唯一选中”和开关组件“单一状态切换”的场景空白，核心价值在于让用户可自由组合选择、高效完成批量勾选，同时通过父子联动、半选状态等设计，提升操作便捷性与视觉清晰度[1]。unione-form-editor 复选组件没有过度复杂设计，而是把字典互通、布局灵活、校验严谨、联动易用、规范适配做到极致，既满足日常简单多选场景，也能支撑权限分配、角色管理等复杂业务场景的多选需求。
相比于单选组件，它支持多值选中，适配“可多选、可全不选”的场景；相比于标签输入组件，它适合选项固定、无需用户自定义新增的场景；相比于开关组件，它能更高效地处理一组关联选项的批量选择，占用视觉空间更小、页面更整洁[1]。全程可视化配置，无需手写多选逻辑、父子联动逻辑、样式适配与事件监听，开箱即用、稳定可靠。
作为低代码平台的核心基础组件，unione-form-editor 持续完善表单组件生态，覆盖输入、选择、上传、滑块、标签、级联、树形、单选、复选等全场景控件，依托Vue 3、TypeScript和Vite构建，为企业级应用提供高效、灵活、美观的表单设计解决方案[1]，助力开发者高效搭建企业级标准化表单。
目前项目已在GitHub、Gitee开源，欢迎前往点亮Star，获取完整源码、查看详细教程，参与社区共建，一起打造更强大的低代码表单设计工具！
GitHub项目地址：https://github.com/unione-cloud/unione-form-editor
Gitee项目地址：https://gitee.com/unione-cloud/unione-form-editor