npm package: @rax-ui/checkbox
Description: Rax UI Checkbox
Author: ruyun
Latest version: 1.0.0-beta.62

---
display: __ComponentName__
family: other
---

# Checkbox

多选框

## API

### Props

### Checkbox

| 名称           | 说明                                    | 类型            | 默认值 |
| :------------- | :-------------------------------------- | :-------------- | :----- |
| checked        | 是否选中（受控模式）                    | bool            |        |
| defaultChecked | 初始选中状态（非受控模式）              | bool            |        |
| disabled       | 是否禁用                                | bool            | false  |
| indeterminate  | 设置 indeterminate 状态，只负责样式控制 |
| readOnly       | 只读模式                                | boolean         | false  |
| style          | 单选框的 style                          | object          | {}     |
| className      | 单选框的 className                      | string          |        |
| children       | Checkbox 的子元素，一般为右侧说明文案   | any             |        |
| onChange       | 改变时回调函数                          | Function(value) |        |

### Checkbox Group

| 名称         | 说明                                          | 类型                   | 默认值     |
| :----------- | :-------------------------------------------- | :--------------------- | :--------- |
| defaultValue | 初始选中的选项（非受控模式）                  | string[]               | -          |
| value        | 指定选中的选项                                | string[]               | -          |
| disabled     | 是否禁用                                      | bool                   | false      |
| readOnly     | 只读模式                                      | boolean                | false      |
| direction    | 排布方向 <br/> 可选值：`horiontal`,`vertical` | enum                   | `vertical` |
| data         | 数据源                                        | CheckboxProps[]        |            |
| style        | Checkbox Group 的 style                       | object                 | {}         |
| className    | Checkbox Group 的 className                   | string                 |            |
| onChange     | 改变时回调函数                                | Function(checkedValue) |            |

### CSS API

#### Checkbox Group

| 名称                          | 说明                                |
| :---------------------------- | :---------------------------------- |
| checkbox--group               | Checkbox Group 样式                 |
| checkbox--group\_\_horizontal | Checkbox Group 水平布局时样式       |
| checkbox--group\_\vertical    | Checkbox Group 垂直布局时样式       |
| checkbox--group\_\_item       | Checkbox Group 中单个 Checkbox 样式 |

#### Checkbox

| 名称                                        | 说明                                |
| :------------------------------------------ | :---------------------------------- |
| checkbox\_\_container                       | Checkbox 盒子样式                   |
| checkbox\_\_circle                          | 圆圈样式                            |
| checkbox--selected\_\_circle                | 选中状态的圆圈样式                  |
| checkbox--press\_\_circle                   | 按下的圆圈样式                      |
| checkbox--selected--press\_\_circle         | 选中且按下状态的圆圈样式            |
| checkbox--disabled\_\_circle                | 禁用状态的圆圈样式                  |
| checkbox--selected--disabled\_\_circle      | 选中、禁用状态的圆圈样式            |
| checkbox--indeterminate--disabled\_\_circle | indeterminate、禁用状态的圆圈样式   |
| checkbox\_\_icon                            | icon 样式                           |
| checkbox--selected\_\_icon                  | 选中状态的 icon 样式                |
| checkbox--selected--disabled\_\_icon        | 选中、禁用状态的 icon 样式          |
| checkbox--indeterminate\_\_icon             | indeterminate 状态的 icon 样式      |
| checkbox--indeterminate--disabled\_\_icon   | indeterminate、禁用状态的 icon 样式 |
| checkbox\_\_text                            | 文案样式                            |
| checkbox--selected\_\_text                  | 选中状态的文案样式                  |
| checkbox--disabled\_\_text                  | 禁用状态的文案样式                  |
| checkbox--indeterminate\_\_text             | indeterminate 状态的文案样式        |
| checkbox--selected--disabled\_\_text        | 选中、禁用状态的文案样式            |
| checkbox--indeterminate--disabled\_\_text   | indeterminate、 禁用状态的文案样式  |