---
title: Checkbox - 多选框
order: 8
path: /Checkbox
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 3
  title: 数据录入
  path: /dataInput
---

多选框是一个选择控件，允许用户通过单击在选中和未选中之间切换。

## 基础多选框

最简单的多选框形式，常用于表单中数据多选的场景。

<code src="./demos/base.tsx" height="400px"/>

## 成组的多选框组

将多选框按一定属性组合使用的多选框组。

<code src="./demos/group.tsx" height="400px"/>

# API

## 属性

### Checkbox

| 参数           | 说明                                    | 类型              | 默认值 |
| -------------- | --------------------------------------- | ----------------- | ------ |
| autoFocus      | 自动获取焦点                            | boolean           | false  |
| checked        | 指定当前是否选中                        | boolean           | false  |
| defaultChecked | 初始是否选中                            | boolean           | false  |
| disabled       | 失效状态                                | boolean           | false  |
| indeterminate  | 设置 indeterminate 状态，只负责样式控制 | boolean           | false  |
| onChange       | 变化时回调函数                          | function(e:Event) | -      |

### Checkbox Group

| 参数         | 说明                                                         | 类型                                | 默认值 |
| ------------ | ------------------------------------------------------------ | ----------------------------------- | ------ |
| defaultValue | 默认选中的选项                                               | string\[]                           | \[]    |
| disabled     | 整组失效                                                     | boolean                             | false  |
| name         | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string                              | -      |
| options      | 指定可选项                                                   | string\[] \| number\[] \| Option\[] | \[]    |
| value        | 指定选中的选项                                               | string\[]                           | \[]    |
| onChange     | 变化时回调函数                                               | function(checkedValue)              | -      |

#### Option

```typescript
interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}
```

## 方法

### Checkbox

| 名称    | 描述     |
| ------- | -------- |
| blur()  | 移除焦点 |
| focus() | 获取焦点 |