---
title: Checkbox 多选框 (done)
order: 2
group: 
  path: /components
nav: 
  title: 组件
  path: /components
---

## 使用

在一组可选项中进行多项选择时。

```jsx
import React from 'react';
import { Checkbox } from 'baas-ui';

import Table from './components/Table';

const onChange = (e) => {
  console.log(e.target.checked);
}

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Orange', value: 'orange' },
  { label: 'Pear', value: 'pear' },
];

const columns = [
  { title: '使用案例', dataIndex: 'type' },
  { title: '例子', dataIndex: 'example' },
];

const dataSource = [
  {
    type: '基本用法',
    example: <Checkbox onChange={onChange}>Checkbox</Checkbox>,
  },
  {
    type: '未全选/全选',
    example: (
      <div>
        <Checkbox indeterminate>未全选</Checkbox>
        <Checkbox indeterminate={false} checked>全选</Checkbox>
      </div>
    ),
  },
  {
    type: '不可用',
    example: (
      <div>
        <Checkbox defaultChecked={false} disabled>Checkbox</Checkbox>
        <br />
        <Checkbox defaultChecked disabled>Checkbox</Checkbox>
      </div>
    ),
  },
  {
    type: 'Checkbox 组',
    example: (
      <div>
        <div>
          <span>用法一：</span>
          <Checkbox.Group defaultValue={['pear']}>
            <Checkbox value="apple">Apple</Checkbox>
            <Checkbox value="orange">Orange</Checkbox>
            <Checkbox value="pear">Pear</Checkbox>
          </Checkbox.Group>
        </div>
        <br />
        <div>
          <span>用法二：</span>
          <Checkbox.Group options={options} defaultValue={['apple']} />
        </div>
      </div>
    ),
  },
];

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="type"
    pagination={false}
  />
)

```

## 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\[] \| Option\[] | \[] |  |
| value | 指定选中的选项 | string\[] | \[] |  |
| onChange | 变化时回调函数 | Function(checkedValue) | - |  |

##### Option

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

### 方法

#### Checkbox

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