<commit_before># Checkbox

[Checkboxes](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.

<!-- example -->
```jsx
import Checkbox from 'react-toolbox/lib/checkbox';

class TestCheckbox extends React.Component {
  state = {
    check1: true,
    check2: false
  };

  handleChange = (field, value) => {
    this.setState({ [field]: value });
  };

  render () {
    return (
      <div>
        <Checkbox 
          checked={this.state.check1} 
          label="Checked option" 
          onChange={this.handleChange.bind(this, 'check1')} 
        />
        <Checkbox 
          checked={this.state.check2} 
          label="Unchecked option" 
          onChange={this.handleChange.bind(this, 'check2')}
        />
        <Checkbox 
          checked 
          disabled 
          label="Disabled checkbox" 
        />
      </div>
    );
  } 
}
```

## Properties

| Name              | Type          | Default         | Description|
|:-----|:-----|:-----|:-----|
| `checked`       | `Bool`        |   `false`        | Value for the checkbox, can be `true` or `false`. |
| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the checkbox field.|
| `disabled`         | `Bool`        |     `false`          | If true, the checkbox shown as disabled and is not possible to modify it.|
| `label`         | `String`        |              | Text label to attach next to the checkbox element.|
| `name`       | `String`       | `false`         | The name of the field to set in the input checkbox.|
| `onBlur`       | `Function`       |                | Callback called when the checkbox is blurred.|
| `onChange`       | `Function`       |                | Callback called when the checkbox value is changed.|
| `onFocus`       | `Function`       |                | Callback called when the checkbox is focused |

## Methods

This component exposes methods to communicate with the `input` DOM component:

- `blur` to blur the input.
- `focus` to focus the input.<commit_msg>Fix checkbox readme<commit_after># Checkbox

[Checkboxes](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.

<!-- example -->
```jsx
import Checkbox from 'react-toolbox/lib/checkbox';

class TestCheckbox extends React.Component {
  state = { check1: true, check2: false };

  handleChange = (field, value) => {
    this.setState({...this.state, [field]: value});
  };

  render () {
    return (
      <div>
        <Checkbox
          checked={this.state.check1}
          label="Checked option"
          onChange={this.handleChange.bind(this, 'check1')}
        />
        <Checkbox
          checked={this.state.check2}
          label="Unchecked option"
          onChange={this.handleChange.bind(this, 'check2')}
        />
        <Checkbox
          checked
          disabled
          label="Disabled checkbox"
        />
      </div>
    );
  }
}
```

## Properties

| Name              | Type          | Default         | Description|
|:-----|:-----|:-----|:-----|
| `checked`       | `Bool`        |   `false`        | Value for the checkbox, can be `true` or `false`. |
| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the checkbox field.|
| `disabled`         | `Bool`        |     `false`          | If true, the checkbox shown as disabled and is not possible to modify it.|
| `label`         | `String`        |              | Text label to attach next to the checkbox element.|
| `name`       | `String`       | `false`         | The name of the field to set in the input checkbox.|
| `onBlur`       | `Function`       |                | Callback called when the checkbox is blurred.|
| `onChange`       | `Function`       |                | Callback called when the checkbox value is changed.|
| `onFocus`       | `Function`       |                | Callback called when the checkbox is focused |

## Methods

This component exposes methods to communicate with the `input` DOM component:

- `blur` to blur the input.
- `focus` to focus the input.
{'fraction_non_alphanumeric': 0.12127065893968662, 'fraction_numerical': 0.0025756600128783, 'mean_word_length': 1.9987129987129988, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1051082', 'n_tokens_mistral': 1307, 'n_tokens_neox': 1242, 'n_words': 427}