<CheckBox
  name="checkbox"
  label="check me out!"
/>

<CheckBox
  name="checkbox"
  label="you cannot check me out"
  disabled
/>

<CheckBox
  name="checkbox"
  label="(un)check me out"
  checked
/>

<CheckBox
  name="checkbox"
  label="check out the console"
  onChange={() => console.log('the checkbox changed state')}
/>

class CheckBoxWrapper extends React.Component {
  constructor(props) {
    super(props);

    this.toggleCheckBox = this.toggleCheckBox.bind(this);

    this.state = {
      checked: false,
    };
  }

  toggleCheckBox() {
    this.setState({
      checked: !this.state.checked,
    });
  }

  render() {
    return (
      <div className="d-flex align-items-center">
        <Button
          variant="light"
          className="mr-3"
          onClick={this.toggleCheckBox}
        >
          Click me to toggle the check box!
        </Button>
        <CheckBox
          name="checkbox"
          label="click the button"
          checked={this.state.checked}
        />
      </div>
    );
  }
}