# Checkbox

* category: UI
* chinese: 复选框组件
* type: UI component

---

<a href="http://nuke.taobao.org/" target="_blank"> Weex-Nuke UI </a>

![nuke-checkbox@ALINPM](http://web.npm.alibaba-inc.com/badge/v/nuke-checkbox.svg?style=flat-square)
![nuke-checkbox@ALINPM](http://web.npm.alibaba-inc.com/badge/d/nuke-checkbox.svg?style=flat-square)

## Usage

The Checkbox component is similar to the Switch component. There are only two
states of opening and closing, but have different using scenes.

`Switch` is usually used for single scattered configuration item settings, but
`Checkbox` is usually used for the selection of multiple data in a data source.

## API

| Parameters     | Description                                  | Type                | Default            |
| -------------- | -------------------------------------------- | ------------------- | ------------------ |
| size           | SIZE                                         | string              | medium(or small)   |
| checked        | checked, or not                              | boolean             | null               |
| defaultChecked | default checked                              | boolean             | false              |
| disabled       | disable, or not                              | boolean             | false              |
| onChange       | the callback function when the state changes | function(checked,e) | null               |
| type           | checkbox type                                | string              | normal(list,empty) |
| touchStyle     | touch area style                             | object              | {}                 |

### Checkbox.Group

| Parameters     | Description                                  | Type                | Default |
| -------------- | -------------------------------------------- | ------------------- | ------- |
| dataSource     | data source                                  | array               | []      |
| value          | selected items                               | array               | []      |
| onChange       | the callback function when the state changes | function(checked,e) | null    |
| style          | the group style in whole container           | Object              | {}      |
| reverse        | reverse the show order of label and checkbox | bool                | false   |
| renderItem     | custom render method for each item           | function            | ()      |
| groupItemStyle | each item's wrap style                       | object              | {}      |

### Usage in controlled or uncontrolled

All input and interaction class components have controlled usage and
uncontrolled usage.

* Controlled usage: component status is affected by external incoming props. The
  external props changes, so that the components will change, such as:

```js
constructor() {
    super();
    this.state = {
        checked: true
    }
}
change = (value) => {
    this.setState({
        checked:!value
    });
}
//...
render(){
    return (<Checkbox checked={this.state.checked} onChange={this.change}/>)
}
```

* Uncontrolled usage: The component itself changes freely and changes what is
  externally changed through the event, such as:

```js
change = (value) => {
    console.log('switch change to: ',value);
}
//...
render(){
    return (<Checkbox defaultChecked={true} onChange={this.change}/>)
}
```

## Demo Reference

<img src="https://img.alicdn.com/tfs/TB1OnHvX3MPMeJjy1XcXXXpppXa-1242-2208.png" width="240" />

Scan the qr code to preview( use apps like Taobao, Qianniu, Tmall... )

<img src="https://img.alicdn.com/tfs/TB1.XfvX3MPMeJjy1XbXXcwxVXa-280-280.png" width="160" />

## How to use

* install

```bash
// Switch to your rax project

npm i nuke-checbox --save

// following that demo, maybe you also need this...
// tnpm i nuke-view nuke-page nuke-text --save
```

* example

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Checkbox from 'nuke-checkbox';
import Page from 'nuke-page';
const themeOrange = '#ff6600';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      checked: false
    };
  }

  onChange(value) {
    console.log(value);
  }
  changeControl(value) {
    this.setState({
      checked: value
    });
  }

  render() {
    return (
      <Page title="Checkbox">
        <Page.Intro sub="普通样式" />
        <View style={styles.demo_item}>
          <View style={styles.group_item}>
            <Checkbox
              defaultChecked={true}
              size="small"
              onChange={this.onChange.bind(this)}
            />
            <Text>苹果</Text>
          </View>
          <View style={styles.group_item}>
            <Checkbox size="small" onChange={this.onChange.bind(this)} />
            <Text>梨</Text>
          </View>
        </View>
        <Page.Intro sub="空心样式" />
        <View style={styles.demo_item}>
          <View style={styles.group_item}>
            <Checkbox
              defaultChecked={true}
              type="empty"
              size="small"
              onChange={this.onChange.bind(this)}
            />
            <Text>苹果</Text>
          </View>
          <View style={styles.group_item}>
            <Checkbox
              size="small"
              type="empty"
              onChange={this.onChange.bind(this)}
            />
            <Text>梨</Text>
          </View>
        </View>
        <Page.Intro sub="list 样式" />
        <View style={[styles.demo_item, { flexDirection: 'column' }]}>
          <View style={styles.group_item}>
            <Checkbox
              defaultChecked={true}
              type="list"
              size="small"
              onChange={this.onChange.bind(this)}
            />
            <Text>浙江省杭州市余杭区</Text>
          </View>
          <View style={styles.group_item}>
            <Checkbox
              size="small"
              type="list"
              onChange={this.onChange.bind(this)}
            />
            <Text>浙江省杭州市临安市</Text>
          </View>
        </View>

        <Page.Intro main="自定义大小颜色" />
        <View style={styles.demo_item}>
          <Checkbox
            style={{ width: '30rem', height: '30rem', fontSize: '20rem' }}
            defaultChecked={true}
            size="small"
            checkedStyle={{ backgroundColor: themeOrange }}
            unCheckedStyle={{ backgroundColor: themeOrange }}
            onChange={this.onChange.bind(this)}
          />
          <Checkbox
            defaultChecked={true}
            size="small"
            type="empty"
            checkedStyle={{ borderColor: themeOrange, color: themeOrange }}
            unCheckedStyle={{ borderColor: themeOrange }}
            onChange={this.onChange.bind(this)}
          />
          <Checkbox
            defaultChecked={true}
            size="small"
            type="list"
            checkedStyle={{ color: themeOrange }}
            onChange={this.onChange.bind(this)}
          />
        </View>
      </Page>
    );
  }
};

const styles = {
  demo_item: {
    width: 750,
    marginTop: 30,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItem: 'center',
    paddingLeft: 12
  },
  group_item: {
    height: 104,
    flexDirection: 'row',
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#F7F8FA',
    alignItems: 'center'
  }
};

render(<App />);
```

## The Other

* Chat with
  <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@ 翊晨
  [yichen]</a> in Dingtalk desktop App
  <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
* DingTalk Group

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />