react-toolbox/components/checkbox

Checkbox

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

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>
    );
  }
}

If you want to provide a theme via context, the component key is RTCheckbox.

Properties

Name	Type	Default	Description
checked	Boolean	false	Value for the checkbox, can be true or false.
children	String, Element or Array		Children to pass through the component.
className	String	''	Sets a class to give customized styles to the checkbox field.
disabled	Boolean	false	If true, the checkbox shown as disabled and cannot be modified.
label	String or node		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

Theme

Name	Description
check	Used as root in the check element.
checked	Used for the check element when it's checked.
disabled	Used when the component is disabled.
field	Used as the root class of the component.
input	Used for the input element.
ripple	Used for the ripple component.
text	Used for the text label.