---
name: Checkbox 复选框
route: /guide/checkbox
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";

# Checkbox 复选框

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

<MessageBox messageType="warning">
  我们推荐您使用复选框组 <InlineCode>CheckboxGroup</InlineCode>，而非单个复选框 <InlineCode>Checkbox</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}
/>


## 配置参数

#### Checkbox

<PropsTable of={Options} />

#### CheckboxGroup

<PropsTable of={OptionsGroup} />