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

## 使用

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

```jsx
import React from 'react';
import { Radio, Row, Col } from 'baas-ui';

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>
        <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() | 获取焦点 |