### 何时使用

用于在多个互斥的备选项中选中一个选项时。

### 组件搭配使用

##### 与文字提示搭配使用，当单选框需要对某种状态进行说明时，利用文字提示进行解释说明。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E5%8D%95%E9%80%89%E6%A1%86----------1@2x.png" />

### 推荐/慎用示例

##### 带有详情信息的单选框，建议就近展开相关内容，不要用单选框触发一个弹窗。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/radio-2@2x.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/radio-3@2x.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />

<hr />

##### 在表单中不要用单选框开启一个功能，建议使用多选框或开关来开启或关闭一个功能。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/radio-4@2x.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/radio-5@2x.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

<hr />

##### 单选框选项为外显组件，选项数量不宜过多，当界面空间承载有限时，可考虑使用下拉选择。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/radio-6@2x.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/radio-7@2x.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

### 相似组件

| 组件名                 | 何时使用                                                                                                     |
| :--------------------- | :----------------------------------------------------------------------------------------------------------- |
| [单选框](./radio)      | 需要从一组互斥的选项中仅选择一个选项时                                                                       |
| [下拉菜单](./dropdown) | 需要在有限的空间内，需要承载多种操作，并且不影响页面结构时；需要将不常用的操作进行收纳，减少对空间的占用时。 |
