() => {
  class MyForm extends Component {
    constructor(props) {
      super(props);

      this.state = {
        values: ['magnetite', 'quartz']
      };

      this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
      const { checked, value } = event.target;

      this.setState(prevState => {
        const values = [...prevState.values];
        const index = values.indexOf(value);
        const hasValue = index !== -1;

        if (checked && !hasValue) {
          values.push(value);
        } else if (hasValue) {
          values.splice(index, 1);
        }

        return { values };
      });
    }

    render() {
      return (
        <DemoForm>
          <CheckboxGroup
            name="minerals"
            onChange={this.handleChange}
            checked={this.state.values}
            data={[
              { label: 'Fluorite', value: 'fluorite' },
              { label: 'Magnetite', value: 'magnetite' },
              { label: 'Quartz', value: 'quartz' }
            ]} />
        </DemoForm>
      );
    }
  }

  return <MyForm />;
}