# Checkbox

复选框。通常用于在一组可选项中进行多项选择。也可单独使用，表示两种状态之间的切换。

# Usage

## 基本
```tsx
import React from 'react'
import { Checkbox } from 'react-icecream'

export default () => {
  return (
    <>
      <Checkbox>可选</Checkbox>
      <Checkbox checked>选中</Checkbox>
      <Checkbox checked={false}>未选中</Checkbox>
      <Checkbox disabled>禁用</Checkbox>
      <Checkbox checked disabled>禁用</Checkbox>
    </>
  )
}
```

## 带边框
```tsx
import React from 'react'
import { Checkbox } from 'react-icecream'

export default () => {
  return (
    <>
      <Checkbox bordered>可选</Checkbox>
      <Checkbox checked bordered>选中</Checkbox>
      <Checkbox checked={false} bordered>未选中</Checkbox>
      <Checkbox disabled bordered>禁用</Checkbox>
      <Checkbox disabled checked bordered>禁用</Checkbox>
    </>
  )
}
```

## 尺寸
```tsx
import React from 'react'
import { Checkbox } from 'react-icecream'

export default () => {
  return (
    <>
      <div style={{ marginBottom: '24px' }}>
        <Checkbox size="large">大</Checkbox>
        <Checkbox size="default">默认</Checkbox>
        <Checkbox size="small">小</Checkbox>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Checkbox bordered size="large">大</Checkbox>
        <Checkbox bordered size="default">默认</Checkbox>
        <Checkbox bordered size="small">小</Checkbox>
      </div>
    </>
  )
}
```

## 组合
```tsx
import React from 'react'
import { CheckboxGroup, Checkbox } from 'react-icecream'

export default () => {
  function onChange(value: string[]) {
    console.log('new value: ', value)
  }

  const options = [
    { value: 'A' },
    { value: 'B', disabled: true },
    { value: 'C' },
    { value: 'D'},
  ]

  return (
    <>
      <CheckboxGroup onChange={onChange} defaultValue={['A', 'C']}>
        {options.map(o => <Checkbox key={o.value} value={o.value} disabled={o.disabled}>{o.value}</Checkbox>)}
      </CheckboxGroup>
      <br /><br />
      <CheckboxGroup disabled defaultValue={['A', 'C']}>
        {options.map(o => <Checkbox key={o.value} value={o.value} disabled={o.disabled}>{o.value}</Checkbox>)}
      </CheckboxGroup>
    </>
  )
}
```

## 全选
```tsx
/**
 * desc: 在 `CheckboxGroup` 内部嵌入 `CheckAll`，可以实现快速全选/反选。
 */
import React from 'react'
import { CheckboxGroup, Checkbox, CheckAll } from 'react-icecream'

export default () => {
  function onChange(value: string[]) {
    console.log('new value: ', value)
  }

  const options = ['A', 'B', 'C', 'D']

  return (
    <CheckboxGroup onChange={onChange} defaultValue={options}>
      <CheckAll /><br /><br />
      {options.map(v => <Checkbox key={v} value={v}>{v}</Checkbox>)}
    </CheckboxGroup>
  )
}
```

## 部分选项被禁用的全选

```tsx
/**
 * desc: 部分选项被禁用时，“全选”动作会尝试选中所有可选的项，并不去改变被禁用项的状态。
 */
import React from 'react'
import { CheckboxGroup, Checkbox, CheckAll } from 'react-icecream'

export default () => {
  function onChange(value: string[]) {
    console.log('new value: ', value)
  }

  const options = ['A', 'B', 'C', 'D']

  return (
    <CheckboxGroup onChange={onChange} defaultValue={['A', 'B']}>
      <CheckAll /><br /><br />
      {options.map(v => <Checkbox key={v} value={v} disabled={v === 'B' || v === 'C'}>{v}</Checkbox>)}
    </CheckboxGroup>
  )
}
```

## 布局
```tsx
/**
 * desc: 通过修改样式或在 `CheckboxGroup` 内部嵌入其它组件，可实现灵活布局。
 */
import React from 'react'
import { CheckboxGroup, Checkbox } from 'react-icecream'

export default () => {
  const options = ['A', 'B', 'C', 'D']

  return (
    <CheckboxGroup>
      <div style={{ display: 'flex', width: '480px'}}>
        {options.map(v => <Checkbox key={v} style={{ flex: 1 }} value={v}>{v}</Checkbox>)}
      </div>
    </CheckboxGroup>
  )
}
```

<code src="./dev/group-disabled.tsx"></code>

<API></API>