---
name: "radio-group"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "radio-group - 单项选择器，内部由多个 radio 组成"
---

## radio-group

> [VERSION] 基础库 >= 2.10.0

### 描述

单项选择器组，内部由多个 radio 组成。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `name` | `string` | 否 | - | 在表单中的字段名 |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `change` | `(event: RadioGroupChangeEvent) => void` | 选中项改变时触发 |

**RadioGroupChangeEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"change"` | 事件类型 |
| `detail` | `RadioGroupChangeDetail` | 事件数据 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<radio-group bind:change="onChange">
  <label ty:for="{{items}}" ty:key="{{item.value}}" class="item">
    <radio value="{{item.value}}" />
    <text>{{item.name}}</text>
  </label>
</radio-group>
<text class="result">选中：{{selected}}</text>
```

*index.tyss*

```css
.item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.result {
  margin-top: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    items: [
      { value: 'apple', name: '苹果' },
      { value: 'banana', name: '香蕉' },
      { value: 'grape', name: '葡萄' },
    ],
    selected: '',
  },
  onChange(e) {
    this.setData({ selected: e.detail.value });
  },
});
```