---
name: Radio 单选框
route: /guide/radio
menu: form
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { OptionsGroup, Options } from "shineDev";
import code from "./demo";
import "./demo/index.scss";

# Radio 单选框

## 概述
在页面上生成一个互斥的多选项的基础控件，通过勾选实现让数据输入更轻松。

<MessageBox messageType="warning">
  我们推荐您使用单选框组 <InlineCode>RadioGroup</InlineCode>，而非单个单选框 <InlineCode>RadioGroup</InlineCode>，表单校验功能仅在单选框组生效。
</MessageBox>

## 代码示例

<MessageBox messageType="info">
  为了让用户直观地查看代码演示，我们加入了{" "}
  <InlineCode>shine-input-helper</InlineCode>{" "}
  修饰符，在开发过程中无需配置该字段。
</MessageBox>

#### 基础单选框

单选框适用于具有互斥的多个选项的表单。 当你的用户有多种选择时，使用单选框按钮更合适。

<Example
  display={<JsxParser {...code.basic} />}
  code={{code:code.basic.jsx}}
  components={code.basic.components}
/>

#### 带状态的单选框

单选框支持多种带状态的样式，适用于不同业务场景下的用户提示。

<Example
  display={<JsxParser {...code.state} />}
  code={{code:code.state.jsx}}
  components={code.state.components}
/>


#### 单选框组

<Example
  display={<JsxParser {...code.group} />}
  code={{code:code.group.jsx}}
  components={code.group.components}
/>


## 配置参数

#### Radio

<PropsTable of={Options} />

#### RadioGroup

<PropsTable of={OptionsGroup} />