#Checkbox 使用

- order: 0
- title_en: Checkbox usage

---

```js
<NukePlayGround>
  // uncontrolled
  <Checkbox defaultChecked={true} onChange={doSomeThing} />
  // controlled
  <Checkbox checked={State} onChange={doSomeThingAndChangeState} />
</NukePlayGround>
```

---

```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';
import ThemeProvider from 'nuke-theme-provider';

const { StyleProvider } = ThemeProvider;
let ThemeStyle = {
  Checkbox: {
    'small-border-radius': '10%',
    'normal-bg-color': '#ffffff',
    'normal-bg-color-selected': '#DD4811',
    'normal-border-color-selected': '#DD4811',
    'empty-border-color': '#C3C5CD',
    'empty-border-color-selected': '#5688D8'
  }
};
const themeOrange = '#ff6600';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      checked: true
    };
  }

  onChange(value) {
    console.log(value);
  }
  changeControl(value) {
    console.log(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={{
              borderColor: themeOrange,
              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.Intro main="使用theme替换" />
        <StyleProvider style={ThemeStyle}>
          <View style={styles.demo_item}>
            <Checkbox
              style={{
                width: '30rem',
                height: '30rem',
                fontSize: '20rem'
              }}
              checked={this.state.checked}
              size="small"
              onChange={this.changeControl.bind(this)}
            />
            <Checkbox
              checked={this.state.checked}
              disabled
              size="small"
              type="empty"
              onChange={this.onChange.bind(this)}
            />
            <Checkbox
              checked={false}
              size="small"
              type="list"
              onChange={this.onChange.bind(this)}
              touchStyle={{ width: 100 }}
            />
          </View>
        </StyleProvider>
      </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 />);
```