---
name: Checkbox
menu: Components
---
# Checkbox
import Checkbox from './index'
import Button from '../button/index'
import { Playground, Props } from 'docz'
import './style/index.scss'

## Props & Methods
<Props of={Checkbox} />

## Basic Usage
<Playground>
    <Checkbox>default</Checkbox>
    <Checkbox checked>checked</Checkbox>
    <Checkbox disabled>disabled</Checkbox>
    <Checkbox disabled checked>disabled & checked</Checkbox>
</Playground>

## State Control
<Playground>
{
    () => {
        class Example extends React.Component {
            constructor(props){
                super(props);
                this.state = {
                    disabled: false,
                    checked: false
                }
                this.setCheck = this.setCheck.bind(this);
                this.setUncheck = this.setUncheck.bind(this);
                this.setDisabled = this.setDisabled.bind(this);
                this.setUndisabled = this.setUndisabled.bind(this);
            }
            setCheck(){
                this.setState({checked: true});
            }
            setUncheck(){
                this.setState({checked: false});
            }
            setDisabled(){
                this.setState({disabled: true});
            }
            setUndisabled(){
                this.setState({disabled: false});
            }
            render(){
                return <>
                <Checkbox
                    disabled={this.state.disabled}
                    checked={this.state.checked}>
                    Try to control the states by clicking the buttons
                </Checkbox>
                <Button
                    onClick={this.setCheck}
                    size="s"
                    >check</Button>
                <Button
                    onClick={this.setUncheck}
                    size="s"
                    >uncheck</Button>
                <Button
                    onClick={this.setDisabled}
                    size="s"
                    >disable</Button>
                <Button
                    onClick={this.setUndisabled}
                    size="s"
                    >undisable</Button>
                </>
            }
        }
        return <Example/>
    }
}
</Playground>