@trendmicro/react-checkbox

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

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

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

API

Properties

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.

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.

License

MIT