## 简介

单选框常用于单项信息输入的场景，用户在可见选项中仅可选择一条内容。

## 示例

```tsx
import React from 'react';
import { Radio } from '@alicloud/console-components';

export default () => {
  return (
    <div>
      <Radio style={{ marginRight: '24px' }}>文本信息</Radio>
      <Radio disabled>文本信息</Radio>
    </div>
  );
};

export const meta = {
  title: '交互',
  describe: '基本使用方式。',
};

```

```tsx
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';

const List = [
  {
    label: '文字信息',
    value: 'A',
  },
  {
    label: '文字信息',
    value: 'B',
  },
  {
    label: '文字信息',
    value: 'C',
  },
  {
    label: '文字信息',
    value: 'D',
  },
];

export default () => {
  const [checkedList, setCheckedList] = useState<string | number>('');

  return (
    <div>
      <h5>单选合集标题</h5>
      <Radio.Group
        dataSource={List}
        value={checkedList}
        direction="ver"
        onChange={(value) => setCheckedList(`${value}`)}
      />
    </div>
  );
};

export const meta = {
  title: '纵向排列',
  describe: '通过direction属性设置排列方向。',
};

```

```tsx
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';

const List = [
  {
    label: '文字信息',
    value: 'A',
  },
  {
    label: '文字信息',
    value: 'B',
  },
  {
    label: '文字信息',
    value: 'C',
  },
  {
    label: '文字信息',
    value: 'D',
  },
];

export default () => {
  const [checkedList, setCheckedList] = useState<string | number>('');

  return (
    <div>
      <h5>单选合集标题</h5>
      <Radio.Group
        dataSource={List}
        value={checkedList}
        direction="hoz"
        onChange={(value) => setCheckedList(`${value}`)}
      />
    </div>
  );
};

export const meta = {
  title: '横向排列',
  describe: '通过direction属性设置排列方向。',
};

```

```tsx
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';

const List = [
  {
    label: '输入文字',
    value: 'A',
  },
  {
    label: '输入文字',
    value: 'B',
  },
  {
    label: '输入文字',
    value: 'C',
  },
];

export default () => {
  const [checkedList, setCheckedList] = useState<string | number>('');

  return (
    <div>
      <h5>单选合集标题</h5>
      <Radio.Group
        value={checkedList}
        itemDirection="ver"
        onChange={(value) => setCheckedList(`${value}`)}
      >
        {List.map((item) => (
          <Radio value={item.value}>
            {item.label}
            <p
              style={{
                margin: '0 0 0 24px',
                color: '#808080',
              }}
            >
              对于选项的描述/解释文案，对于选项的描述/解释文案
            </p>
          </Radio>
        ))}
      </Radio.Group>
    </div>
  );
};

export const meta = {
  title: '带描述的单选框',
  describe: '在Radio中添加描述文案。',
};

```

```tsx
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';
import styled from 'styled-components';

const List = [
  {
    label: '输入文字',

    value: 'A',
  },
  {
    label: '输入文字',
    value: 'B',
  },
  {
    label: '输入文字',
    value: 'C',
    disabled: true,
  },
  {
    label: '输入文字',
    value: 'D',
  },
];

const StyledDiv = styled.div`
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  padding: 16px 16px 0 16px;
  margin: 2px;
  width: 252px;
  &:hover {
    background-color: #f7f9fa;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
  }
`;

const girdStyle = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr',
  grigTemplateRows: '1fr 1fr',
  gridColumnGap: '106px',
  gridRowGap: '32px',
};

export default () => {
  const [checkedList, setCheckedList] = useState<string | number>('');

  return (
    <div>
      <Radio.Group
        value={checkedList}
        onChange={(value) => setCheckedList(`${value}`)}
        style={girdStyle}
      >
        {List.map((item) => (
          <StyledDiv
            style={
              checkedList === item.value ? { backgroundColor: '#eff3f8' } : {}
            }
          >
            <Radio value={item.value} disabled={item.disabled}>
              {item.label}
              <p
                style={{
                  margin: '0 0 0 24px',
                  color: '#808080',
                }}
              >
                按指定IP/实例ID申请，每月限使用20次，如需提升配额需
                <a style={{ color: '#0064c8' }}>提交工单申请</a>
              </p>
            </Radio>
          </StyledDiv>
        ))}
      </Radio.Group>
    </div>
  );
};

export const meta = {
  title: '单选选项卡（支持纵横布局）',
  describe: '通过设置Radio.Group的style属性，实现横向和纵向布局；灵活使用Radio，实现选项卡。',
};

```

## API

### Radio

| 参数           | 说明                                                                                                                                           | 类型                                                                    | 默认值 | 是否必填 |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------ | -------- |
| id             | 组件 input 的 id                                                                                                                               | string                                                                  | -      |          |
| checked        | 设置 radio 是否选中                                                                                                                            | boolean                                                                 | -      |          |
| defaultChecked | 设置 radio 是否默认选中                                                                                                                        | boolean                                                                 | -      |          |
| label          | 通过属性配置 label                                                                                                                             | React.ReactNode                                                         | -      |          |
| onChange       | 选中状态变化时触发的事件<br/><br/>**签名**:<br/>**参数**:<br/>*checked*: 是否选中<br/>*event*: DOM 事件                                        | (checked: boolean, event: React.ChangeEvent\<HTMLInputElement>) => void | -      |          |
| onMouseEnter   | 鼠标进入 enter 事件                                                                                                                            | (e: React.MouseEvent\<HTMLInputElement>) => void                        | -      |          |
| onMouseLeave   | 鼠标离开事件                                                                                                                                   | (e: React.MouseEvent\<HTMLInputElement>) => void                        | -      |          |
| disabled       | radio 是否被禁用                                                                                                                               | boolean                                                                 | -      |          |
| value          | radio 的 value                                                                                                                                 | RadioValue                                                              | -      |          |
| name           | 表单项 name                                                                                                                                    | string                                                                  | -      |          |
| isPreview      | 是否开启预览态                                                                                                                                 | boolean                                                                 | -      |          |
| renderPreview  | 自定义预览态模式下渲染的内容<br/><br/>**签名**:<br/>**参数**:<br/>*checked*: 是否选中<br/>*props*: 所有传入的参数<br/>**返回值**:<br/>渲染内容 | (checked: boolean, props: RadioProps) => React.ReactNode                | -      |          |

### Radio.Group

| 参数          | 说明                                                                                                                                               | 类型                                                                        | 默认值   | 是否必填 |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- | -------- |
| name          | 表单 name                                                                                                                                          | string                                                                      | -        |          |
| value         | radio group 的选中项的值（受控）                                                                                                                   | RadioValue                                                                  | -        |          |
| defaultValue  | radio group 的默认值（非受控）                                                                                                                     | RadioValue                                                                  | -        |          |
| component     | 设置标签类型                                                                                                                                       | React.ElementType                                                           | 'div'    |          |
| onChange      | 选中值改变时的事件<br/><br/>**签名**:<br/>**参数**:<br/>*value*: 选中的值<br/>*event*: Dom 事件对象                                                | (value: RadioValue, event: React.ChangeEvent\<HTMLInputElement>) => void    | -        |          |
| disabled      | 表示 radio 被禁用                                                                                                                                  | boolean                                                                     | -        |          |
| shape         | 展示类型                                                                                                                                           | 'normal' | 'button'                                                        | -        |          |
| size          | 与 `shape` 属性配套使用，shape 设为 button 时有效                                                                                                  | 'large' | 'medium' | 'small'                                              | 'medium' |          |
| dataSource    | 可选项列表                                                                                                                                         | Array\<RadioValue> | Array\<RadioValueItem>                                | -        |          |
| children      | 通过子元素方式设置内部 radio                                                                                                                       | React.ReactNode                                                             | -        |          |
| direction     | 子项目的排列方式                                                                                                                                   | 'hoz' | 'ver'                                                              | -        |          |
| isPreview     | 是否开启预览态                                                                                                                                     | boolean                                                                     | -        |          |
| renderPreview | 自定义预览态模式下渲染的内容<br/><br/>**签名**:<br/>**参数**:<br/>*previewed*: 预览的数据项<br/>*props*: 预览项的参数<br/>**返回值**:<br/>渲染内容 | (previewed: RadioValueItem | object, props: GroupProps) => React.ReactNode | -        |          |

### RadioValueItem

| 参数     | 说明 | 类型            | 默认值 | 是否必填 |
| -------- | ---- | --------------- | ------ | -------- |
| label    | -    | React.ReactNode | -      |          |
| value    | -    | RadioValue      | -      | 是       |
| disabled | -    | boolean         | -      |          |

### RadioValue

```typescript
export type RadioValue = string | number | boolean;
```