> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.

单选按钮组件用于从多个选项中选择一个，确保用户只能选择一个选项。

## 属性设置 {#b50a17d3}

单选按钮组件提供了丰富的属性配置选项，以下是一些关键属性配置说明。关于组件尺寸、位置、样式、指针、变换等通用属性的设置方法，请参考[设置组件属性和事件](/guides/set_properties_events)。

### 绑定静态数据 {#1ded21eb}

你可以输入选项名称和选项值，为单选按钮组件绑定静态数据。

* 选项名称：设置选项的显示名称，能够清晰展示每个选项的含义。
* 选项值：选项对应的具体值，用于数据处理或与接口的数据对齐。

例如通过单选按钮组件设置满意度选项，其中**选项名称**为**非常满意**、**一般**、**不满意**，**选项值**为 **3**、**2**、**1**。

![Image=627x350](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/544d6a8060d24ea2994ffd2ee9ab1782~tplv-goo7wpa0wc-image.image)

### 绑定动态数据 {#1bcbbed4}

通过绑定工作流为单选按钮获取动态数据。

1. 为单选按钮绑定一个 Array 类型的数据源。
   例如将工作流的输出变量（例如 `output`）作为单选按钮的数据源，该输出变量必须为 Array 类型。绑定工作流后，需要配置事件以触发工作流的调用，确保数据能够动态加载。
   ::::cols
   @col 33
   **工作流输出变量**
   
   ![Image=523x681](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/27a9b2f435214eba9edd3f7cb61e5982~tplv-goo7wpa0wc-image.image)
   
   @col 33
   **绑定数据源**
   
   ![Image=269x264](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4be2e9bce5ec4f06abb0eaf71e87d7b3~tplv-goo7wpa0wc-image.image)
   
   @col 33
   **配置事件**
   
   ![Image=383x528](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1a5022e77f914f2790747abebe777b95~tplv-goo7wpa0wc-image.image)
   ::::
2. 为单选按钮组件中的绑定具体的数据字段。
   绑定数据源后，你可以通过 `item` 变量遍历和访问 Array 类型数据源中的每个元素。即你可以为单选按钮组件中的**选项名称**和**选项值**绑定具体的数据字段。例如为**选项名称**绑定数据字段 `{{item.show_name}}`，为**选项值**绑定数据字段 `{{item.show_id}}`。具体示例，请参考[配置示例](/guides/radio_button_mini_program#f41f7d1a)。
   :::tip 说明
   为图片组件绑定数据字段时，字段值需为图片地址，支持上传 `jpg`、`png`格式，暂不支持`svg`。
   :::
   ::::cols
   @col 49
   **item 变量**
   
   ![Image=204x468](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4950a54ec1074d49a96adb4c38cded29~tplv-goo7wpa0wc-image.image)
   
   @col 49
   **绑定数据字段**
   
   ![Image=269x322](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/941cde262cef4538a956265521987135~tplv-goo7wpa0wc-image.image)
   ::::   


### **可见性设置** {#93219ce9}

单选按钮组件的可见性可通过设置常用条件或表达式灵活控制，以实现特定场景下的隐藏或显示。

* 表达式方式
   * 设置为 false：显示组件。
   * 设置为 true：隐藏组件。
   * 设置为变量：通过变量值（true 或 false）动态控制组件的可见性。配置示例，请参考[隐藏组件](/guides/set_properties_events#46d8e38f)。
* 常用条件方式
   支持通过可视化界面设置条件，以控制组件的可见性。   


例如通过下拉选择组件 Picker2 的值动态控制两个单选按钮组件 Radio3、Radio4 的可见性，其中 Picker2 的选项为男生（值为 0）、女生（值为 1）。

* 设置单选按钮组件 Radio3 的隐藏条件为 **** `Picker2.value = 1`，即在 Picker2 组件中选择女生时，隐藏组件 Radio3，展示组件 Radio4。
* 设置单选按钮组件 Radio4 的隐藏条件为 `Picker2.value = 0` ，即在 Picker2 组件中选择男生时，隐藏组件 Radio4，展示组件 Radio3。

::::cols
@col 33
**Radio3 组件可见性配置**

![Image=535x547](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f8fe2b9b233f459eb601a3bda97cde99~tplv-goo7wpa0wc-image.image)

@col 33
**Radio4 组件可见性配置**

![Image=562x544](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5ae37008f1fe4f22980a913ceb64adb9~tplv-goo7wpa0wc-image.image)

@col 33
**效果**

![Image=476x323](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f3536143d2574481b29ca9e11487a0bd~tplv-goo7wpa0wc-image.image)
::::

## 事件设置 {#033d1cfa}

通过配置单选按钮组件的事件，可以为单选按钮组件添加丰富的交互功能，以增强用户体验和界面的互动性。

<!-- @cols-width: 148,709 -->
|**事件项** |**说明** |
|---|---|
|事件类型 |数据改变时：当单选按钮组件的数据发生变化时，触发预定义的事件。 |
|组件方法 |支持以下方法： |\
| | |\
| |* 设置数据：为组件设置或更新数据。 |\
| |* 设置禁用：使组件变为禁用状态，用户无法与之交互。 |\
| |* 设置隐藏：隐藏组件，使其不可见。 |

## 配置示例 {#f41f7d1a}

例如某企业想组织员工观影，可通过创建工作流查询正在上映的电影，并设计表单让员工通过单选按钮选择感兴趣的影片，从而高效完成调查。具体操作如下：

1. 创建工作流（test2）。
   使用淘票票插件（GetMovieAndShow）搜索正在上映或即将上映的电影。其中，在**结束**节点中，设置输出变量 `output` 的值为**淘票票**插件输出结果中的 `return_value` ，其为 Array 类型，包括影片名称、ID、类型、描述等信息。
   ![Image=605x233](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9ebb22bafae646e6b4ef7a3591c1cbe0~tplv-goo7wpa0wc-image.image)
2. 搭建表单页面。
   搭建一个小程序表单页面，包括姓名、选择的影片等。
   ![Image=212x391](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/fadcd1a485bb4cb597d71290b6d689fb~tplv-goo7wpa0wc-image.image)
3. 为单行输入组件（Input1）配置事件。
   输入员工名字后，将调用工作流（test2）搜索正在上映或即将上映的电影。
   ![Image=293x403](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d05993ed343443369540f0c9fc0b31cb~tplv-goo7wpa0wc-image.image)
4. 绑定数据。
   1. 将工作流的输出变量 `output` 绑定到单选按钮组件上。
      ![Image=272x263](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9ba7a58e3ff34088baeff3f88b610768~tplv-goo7wpa0wc-image.image)
   2. 为单选按钮组件中的选项名称和选项值绑定数据字段。
      * `show_name` 字段值为影片名称。
      * `show_id` 字段值为影片 ID。
         ![Image=262x318](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/139370837ba14234882cd87582035e4f~tplv-goo7wpa0wc-image.image)
5. 预览效果。
   你还可以为**提交**按钮添加事件，将提交结果写入飞书多维表格进行统计。
   ![Image=265x562](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4943948bbe7b47a29fe4cba0e0e9d753~tplv-goo7wpa0wc-image.image)