勾选框

1. 组件概述

勾选框是一个数据输入组件，用于收集用户的是/否选择。它以一个可点击的方框形式呈现，用户点击后会在框内显示勾选标记，表示选中状态。勾选框的值是布尔类型（true/false），适用于需要用户确认或开启某项功能的场景，例如”同意用户协议”、“记住登录状态”、“开启通知提醒”等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：用户协议确认。在 AI 应用的注册或使用页面，添加一个勾选框让用户确认已阅读并同意使用条款。设置”说明”为”我已阅读并同意《用户协议》“，并在校验中设置为必填，确保用户必须勾选后才能继续操作。
• 场景二：功能开关控制。在 AI 对话应用中，添加一个勾选框让用户选择是否”启用详细解释模式”。当用户勾选后，在”值变化”事件中调用工作流，将该选项传递给后端，AI 会根据此设置调整回答的详细程度。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
绑定变量	组件的变量名，用于存储用户的勾选状态。其他组件可以绑定此变量来获取勾选状态，调用工作流时此变量的值也会传递给后端。例如设置为”agreeTerms”，则可在其他地方引用该变量判断用户是否同意条款。
标题	显示在勾选框左侧的标签文字，用于说明该勾选项的用途，如”同意协议”、“开启通知”。
说明	显示在勾选框右侧的文字，用于描述该选项的具体含义。例如”我已阅读并同意用户协议”。这是勾选框最常用的配置，用户通过阅读说明文字来理解勾选的含义。
值格式	用于自定义勾选和未勾选时存储的值。默认情况下，勾选时值为 true，未勾选时值为 false。如果需要与后端系统对接，可以自定义为其他值，例如勾选值设为 1，未勾选值设为 0，或者勾选值设为”yes”，未勾选值设为”no”。
标题提示	在标题旁边显示一个小问号图标，鼠标悬停时弹出提示内容。适合放置对该勾选项的补充说明。
控件提示	在勾选框旁边显示一个小问号图标，鼠标悬停时弹出提示内容。
描述	显示在勾选框下方的浅色说明文字，用于补充解释该配置项的用途或填写要求。

事件折叠组

配置项	说明
添加事件	支持”值变化”事件，当用户勾选或取消勾选时触发。常见用途：根据勾选状态控制其他组件的显示/隐藏，或者在勾选后调用工作流执行相应操作。例如用户勾选”需要发票”后，显示发票信息填写区域。

设计

表单项折叠组

配置项	说明
模式	勾选框的视觉样式。可选”默认”或”按钮”。默认模式显示为传统的方框勾选样式；按钮模式则将勾选框显示为可点击的按钮样式，选中时按钮会有高亮效果，视觉上更加醒目。

选项样式折叠组

用于自定义勾选框说明文字在不同状态下的样式，包括常规、悬浮、禁用、选中、选中态悬浮、选中禁用等状态。可以设置文字颜色、背景色、边框等样式。

勾选框样式折叠组

配置项	说明
隐藏勾选框	开启后，勾选框的方框图标会被隐藏，只显示说明文字。适用于某些特殊的界面设计需求。

此外还可以自定义勾选框方框在不同状态下的样式，包括背景色、边框、圆角等，以及选中状态下的勾选图标和图标颜色。

高级

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。
隐藏	控制组件是否隐藏。与”可见”相反。
禁用	控制组件是否禁用（变灰且不可操作）。可以设置为始终禁用，或根据条件动态控制。例如在用户未完成某些前置步骤时禁用该勾选框。
静态展示	开启后，勾选框变为只读的纯展示模式，不可编辑。适用于详情页或确认页面，仅展示用户之前的选择结果。
隐藏时删除字段	开启后，当该勾选框被隐藏时，其值会从表单数据中删除。适用于条件显示的字段，避免提交无关数据。

校验折叠组

配置项	说明
必填	开启后，用户必须勾选该选项才能提交表单。常用于”同意协议”等必须确认的场景。