---
name: Radio 单选框
route: /radio
menu: 表单组件
---

import { Playground } from 'docz';
import Radio from './index';

## 演示

### 简单示例

<Playground>
  {() => {
    const [checked, changeChecked] = React.useState(false);
    return (
      <>
        <Radio checked={checked} onChange={changeChecked}>Apple</Radio>
        <div>{String(checked)}</div>
      </>
    );
  }}
</Playground>

### 组

`Radio.Group`

<Playground>
  {() => {
    const [value, changeValue] = React.useState('apple');
    return (
      <>
        <Radio.Group value={value} onChange={changeValue}>
          <Radio value="apple">Apple</Radio>
          <Radio value="smartisan">Smartisan</Radio>
        </Radio.Group>
        <div>{value}</div>
      </>
    );
  }}
</Playground>

### 禁用

disabled: `boolean`

<Playground>
  {() => {
    const [value, changeValue] = React.useState('apple');
    return (
      <>
        <Radio.Group disabled value={value} onChange={changeValue}>
          <Radio value="apple">Apple</Radio>
          <Radio value="smartisan">Smartisan</Radio>
        </Radio.Group>
        <div>{value}</div>
      </>
    );
  }}
</Playground>

## API

### Radio Props

| 参数 | 类型 | 默认值 | 说明 |
|-----|------|-------|-----|
| value | `any` | - | 值 |
| checked | `boolean` | - | 是否选中 |
| defaultChecked | `boolean` | `false` | 是否默认选中 |
| disabled | `boolean` | `false` | 禁用 |
| onChange | `(checked: boolean, target: RadioProps) => void` | - | 变更事件 |
| className | `string` | - | 类名 |
| style | `React.CSSProperties` | - | 样式 |

### Radio.Group Props

| 参数 | 类型 | 默认值 | 说明 |
|-----|------|-------|-----|
| value | `any` | - | 值 |
| defaultValue | `any` | - | 默认值 |
| disabled | `boolean` | `false` | 禁用 |
| onChange | `(value: any, target: RadioGroupProps) => void` | - | 变更事件 |
| className | `string` | - | 类名 |
| style | `React.CSSProperties` | - | 样式 |