---
name: "Radio"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Radio - 单选项目"
---

## Radio

> [VERSION] @ray-js/ray >= 0.5.10

### 描述

单选框，用于在一组互斥选项中选中其中一项。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `value` | `string` | 否 | - | radio 标识；该 radio 选中时，radio-group 的 change 事件会携带其 value |
| `checked` | `boolean` | 否 | `false` | 当前是否选中，可作默认选中 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `color` | `string` | 否 | `"#007AFF"` | radio 的颜色，同 CSS 的 color |

### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { Radio, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Radio checked />
    </View>
  );
}
```

#### 不同状态

```tsx
import React from 'react';
import { Radio, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '10px' }}>
        <Text>默认状态：</Text>
        <Radio />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>选中状态：</Text>
        <Radio checked />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>禁用状态：</Text>
        <Radio disabled />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>自定义颜色：</Text>
        <Radio color="#ff0000" checked />
      </View>
    </View>
  );
}
```