zilly-ui/src/checkbox/checkbox.mdx

Zilly web react ui components

---
name: Checkbox
---

import { Playground, Props } from "docz";
import Checkbox from "./index";
import CheckboxGroup from './checkboxWrap.tsx';

# Checkbox & CheckboxGroup

## CheckboxGroup Props

| Property     | Description                        | Type                 | Default |
| :----------- | :--------------------------------- | :------------------- | :------ |
| value        | CheckboxGroup checked value        | string[]             | -       |
| defaultValue | CheckboxGroup checked defaultvalue | string[]             | -       |
| onChange     | checkboxgroup onChange callback    | (checkedArray)=>void | -       |
| disabled     | Disable all checkboxes             | Boolean              | false   |
| options      | Specifies options                  | string[]             | -       |

## Checkbox Props

| Property       | Description                   | Type          | Default |
| :------------- | :---------------------------- | :------------ | :------ |
| checked        | Checkbox init checked         | Boolean       | false   |
| defaultChecked | Checkbox init default checked | Boolean       | false   |
| onChange       | checked change                | (event)=>void | -       |
| disabled       | checkbox disabled             | Boolean       | false   |

### base usage

<Playground>
    <Checkbox checked>A</Checkbox>
</Playground>

### disabled

<Playground>
    <Checkbox checked disabled>A</Checkbox>
</Playground>

### callback

<Playground>
    <Checkbox checked onChange={v=>alert('checked:'+v)}>A</Checkbox>
</Playground>

### checkboxGroup

<Playground>
    <CheckboxGroup defaultValue={['A']}>
        
    </CheckboxGroup>
</Playground>

### checkboxGroup callback

<Playground>
    <CheckboxGroup defaultValue={['A']} onChange={v=>alert('checked:'+v)}>
        <Checkbox>A</Checkbox>
        <Checkbox>B</Checkbox>
        <Checkbox>C</Checkbox>
    </CheckboxGroup>
</Playground>

### checkboxGroup disabled

<Playground>
    <CheckboxGroup defaultValue={['A']} disabled onChange={v=>alert('checked:'+v)}>
        <Checkbox>A</Checkbox>
        <Checkbox>B</Checkbox>
        <Checkbox>C</Checkbox>
    </CheckboxGroup>
</Playground>