---
name: Checkbox 多选框
route: /checkbox
parent: 组件
menu: 数据录入
---
import { Playground, Props } from 'docz'
import  Checkbox  from '../components/checkbox'
import  CheckboxGroup  from '../components/checkbox/group'
import Demo from './components/check'

# Checkbox 多选框
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法

<Playground>
    <Checkbox >点我</Checkbox>
    <Checkbox checked>点我</Checkbox>
    <Checkbox indeterminate>点我</Checkbox>
    <Checkbox disabled>点我</Checkbox>
    <Checkbox disabled checked>点我</Checkbox>
</Playground>

## defaultChecked

<Playground>
    <Checkbox defaultChecked>点我</Checkbox>
</Playground>

## onChange

<Playground>
    <Checkbox onChange={console.log}>点我</Checkbox>
</Playground>

## CheckboxGroup

<Demo/>


```typescript jsx
const CheckboxGroup = Checkbox.Group;
const [v, setV] = useState([1]);

<CheckboxGroup
    values={v}
    onChange={e => {
      setV(e);
    }}
    options={[
        { label: '香蕉', value: 1 }, 
        { label: '苹果', value: 2 }, 
        { label: '葡萄', value: 3 }]}
/>
```


## API


<Props of={Checkbox} />