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