v3.4.1

Address an issue where checking element type for imported components is not possible with projects using react-hot-loader (7b8b65d)

v3.4.0

• [IE only] Address an issue that the change event never fires for indeterminate input elements (6a2fba9)

  Use onClick event handler if you want to have a cross-browser solution for handling indeterminate input elements.

  <Checkbox
      checked={checked}
      indeterminate={indeterminate}
      onClick={(event) => {
          const { checked, indeterminate } = event.target;
          if ((!checked && indeterminate) || checked) {
              // Check
          } else {
              // Uncheck
          }
      }}
  />

  Also see jquery/jquery#1698

v3.3.1

Update icons that was previously broken in v3.3.0 (e690c8c)

v3.3.0

Update icons (ca5e210)

v3.2.0

Add a "depth" prop to limit the recursion depth when rendering checkboxes deeply inside a checkbox group (62843f0)

Example

<CheckboxGroup
    name="comic"
    value={this.state.value}
    depth={3} // This is needed to minimize the recursion overhead
    onChange={(value, event) => {
        this.setState({ value: value });
    }}
>
    <div className="row">
        <div className="col-xs-12 col-sm-6">
            <Checkbox label="Batman (DC)" value="dc:batman" />
            <Checkbox label="Hulk (Marvel)" value="marvel:hulk" />
        </div>
        <div className="col-xs-12 col-sm-6">
            <Checkbox label="Superman (DC)" value="dc:superman" />
            <Checkbox label="Spider-Man (Marvel)" value="marvel:spiderman" disabled />
        </div>
    </div>
</CheckboxGroup>

v3.1.0

CheckboxGroup support (0e89e23)

v3.0.0

Refactors Checkbox component that attaches text label next to the checkbox element

Usage

<Checkbox label="Checkbox label" />

The label prop is optional, you can use children to pass through the component.

<Checkbox label="Checkbox label">
    <p style={{ marginLeft: 24 }}>
        Lorem ipsum dolor sit amet...
    </p>
</Checkbox>

<Checkbox>
    <span style={{ verticalAlign: 'middle', marginLeft: 8 }}>
        Lorem ipsum dolor sit amet...
    </span>
</Checkbox>

Uncontrolled Checkbox

// Default checked
<Checkbox defaultChecked />

// Default partially checked
<Checkbox defaultChecked defaultIndeterminate />

Controlled Checkbox

// Checked
<Checkbox checked />

// Partially checked
<Checkbox checked indeterminate />

v2.1.1

1. Move essential chained-function library to node module dependencies.
2. Add rimraf for cross-platform compatibilities when running npm run clean script.

v2.1.0

1. Re-support label
2. Remove default value of props "defaultChecked"

v2.0.0

Make it could get checked status.