---
title: Radio 单选框
order: 4
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

用于在多个备选项中选中单个状态。

```jsx
import React from 'react';
import { Radio, Row, Col } from 'quanta-design';

import Table from './components/Table';

const onChange = e => {
  console.log(e.target.checked);
};

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Orange', value: 'orange' },
  { label: 'Pear', value: 'pear' },
];

const columns = [
  { title: '使用案例', dataIndex: 'type' },
  { title: '例子', dataIndex: 'example' },
];

const dataSource = [
  {
    type: '基本用法',
    example: <Radio onChange={onChange}>Radio</Radio>,
  },
  {
    type: '不可用',
    example: (
      <div>
        <Radio defaultChecked={false} disabled>
          Radio
        </Radio>
        <br />
        <Radio defaultChecked disabled>
          Radio
        </Radio>
      </div>
    ),
  },
  {
    type: 'Radio 组',
    example: (
      <div>
        <div>
          <span>用法一：</span>
          <Radio.Group defaultValue="pear">
            <Radio value="apple">Apple</Radio>
            <Radio value="orange">Orange</Radio>
            <Radio value="pear">Pear</Radio>
          </Radio.Group>
        </div>
        <br />
        <div>
          <span>用法二：</span>
          <Radio.Group options={options} defaultValue="apple" />
        </div>
      </div>
    ),
  },
  {
    type: 'Radio 按钮',
    example: (
      <div>
        <Row>
          <Col span={3}>
            <span>Large：</span>
          </Col>
          <Col span={21}>
            <Radio.Group defaultValue="a" size="large">
              <Radio.Button value="a">Hangzhou</Radio.Button>
              <Radio.Button value="b">Shanghai</Radio.Button>
              <Radio.Button value="c">Beijing</Radio.Button>
              <Radio.Button value="d">Chengdu</Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={3}>Middle：</Col>
          <Col span={21}>
            <Radio.Group defaultValue="a">
              <Radio.Button value="a">Hangzhou</Radio.Button>
              <Radio.Button value="b">Shanghai</Radio.Button>
              <Radio.Button value="c">Beijing</Radio.Button>
              <Radio.Button value="d">Chengdu</Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
        <Row style={{ marginTop: 12 }}>
          <Col span={3}></Col>
          <Col span={21}>
            <Radio.Group defaultValue="a" buttonStyle="solid">
              <Radio.Button value="a">Hangzhou</Radio.Button>
              <Radio.Button value="b">Shanghai</Radio.Button>
              <Radio.Button value="c">Beijing</Radio.Button>
              <Radio.Button value="d">Chengdu</Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
        <br />
        <Row>
          <Col span={3}>Small：</Col>
          <Col span={21}>
            <Radio.Group defaultValue="a" size="small">
              <Radio.Button value="a">Hangzhou</Radio.Button>
              <Radio.Button value="b">Shanghai</Radio.Button>
              <Radio.Button value="c">Beijing</Radio.Button>
              <Radio.Button value="d">Chengdu</Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
      </div>
    ),
  },
];

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="type"
    pagination={false}
  />
);
```

## API

### Radio

| 参数           | 说明                              | 类型    | 默认值 |
| -------------- | --------------------------------- | ------- | ------ |
| autoFocus      | 自动获取焦点                      | boolean | false  |
| checked        | 指定当前是否选中                  | boolean | false  |
| defaultChecked | 初始是否选中                      | boolean | false  |
| value          | 根据 value 进行比较，判断是否选中 | any     |        |

### RadioGroup

单选框组合，用于包裹一组 `Radio`。

| 参数         | 说明                                                   | 类型                                                                      | 默认值    |
| ------------ | ------------------------------------------------------ | ------------------------------------------------------------------------- | --------- |
| defaultValue | 默认选中的值                                           | any                                                                       |           |
| disabled     | 禁选所有子单选器                                       | boolean                                                                   | false     |
| name         | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string                                                                    |           |
| options      | 以配置形式设置子元素                                   | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> |           |
| size         | 大小，只对按钮样式生效                                 | `large` \| `default` \| `small`                                           | `default` |
| value        | 用于设置当前选中的值                                   | any                                                                       |           |
| onChange     | 选项变化时的回调函数                                   | Function(e:Event)                                                         |           |
| buttonStyle  | RadioButton 的风格样式，目前有描边和填色两种风格       | `outline` \| `solid`                                                      | `outline` |

##### Option

```typescript
interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}
```

## 方法

### Radio

| 名称    | 描述     |
| ------- | -------- |
| blur()  | 移除焦点 |
| focus() | 获取焦点 |