react-checkbox

React Checkbox

Demo: https://trendmicro-frontend.github.io/react-checkbox

Installation

1. Install the latest version of react and react-checkbox:

npm install --save react @trendmicro/react-checkbox

2. At this point you can import @trendmicro/react-checkbox and its styles in your application as follows:

import { Checkbox, CheckboxGroup } from '@trendmicro/react-checkbox';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-checkbox/dist/react-checkbox.css';

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 />

CheckboxGroup

When rendering checkboxes deeply nested inside the checkbox group, you need to pass a depth prop to limit the recursion depth.

<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>

Prevent onChange Propagation

You may need to use event.stopPropagation() to stop onChange propagation when wrapping an input element inside the CheckboxGroup or Checkbox component.

<CheckboxGroup
    name="checkboxgroup"
    value={this.state.value}
    onChange={(value, event) => {
        this.setState({ value: value });
    }}
>
    <Checkbox label="First option" value="one">
        <div style={{ marginLeft: 22 }}>
            <input
                type="text"
                onChange={(event) => {
                    // Prevent onChange propagation
                    event.stopPropagation();
                }}
            />
        </div>
    </Checkbox>
    <Checkbox label="Second option" value="two">
        <div style={{ marginLeft: 22 }}>
            <input
                type="text"
                onChange={(event) => {
                    // Prevent onChange propagation
                    event.stopPropagation();
                }}
            />
        </div>
    </Checkbox>
</CheckboxGroup>

API

Properties

Checkbox

Name | Type | Default | Description :--- | :--- | :------ | :---------- children | any | | Children to pass through the component. className | Object | | Customized class name for the component. style | Object | | Customized style for the component. label | Node or String | | Text label to attach next to the checkbox element. inputClassName | Object | | Customized class name for the checkbox element. inputStyle | Object | | Customized style for the checkbox element. disabled | Boolean | false | If true, the checkbox shown as disabled and cannot be modified. checked | Boolean | | The checked state of the checkbox element. defaultChecked | Boolean | | The default checked state of the checkbox element. indeterminate | Boolean | | The indeterminate state of the checkbox element. defaultIndeterminate | Boolean | false | The default indeterminate state of the checkbox element. onChange | Function(event) | | The callback function that is triggered when the state changes. onClick | Function(event) | | The callback function that is triggered when the checkbox is clicked.

CheckboxGroup

Name | Type | Default | Description :--- | :--- | :------ | :---------- children | any | | Children to pass through the component. disabled | Boolean | false | If true, the checkbox group will be displayed as disabled. name | String | | Name for the input element group. value | any | | The value of the checkbox group. defaultValue | any | | The default value of the checkbox group. onChange | Function(value, event) | | The callback function that is triggered when the value changes. depth | Number | 1 | Limits the recursion depth when rendering checkboxes deeply inside a checkbox group.

Class Properties

Use the ref property to get a reference to the component:

<Checkbox
    ref={node => {
        if (node) {
            this.checkbox = node;
            console.log(this.checkbox.checked);
            console.log(this.checkbox.indeterminate);
        }
    }}
/>

Name | Type | Description :--- | :--- | :---------- checked | Boolean | Get the checked state. indeterminate | Boolean | Get the indeterminate state.

CheckboxGroup

Use the ref property to get a reference to this component:

<CheckboxGroup
    ref={node => {
        if (node) {
            this.checkboxGroup = node;
            console.log(this.checkboxGroup.value);
        }
    }}
/>

Name | Type | Description :--- | :--- | :---------- value | any | Get the value of the checkbox group.

License

MIT