import Checkbox from '..';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    value: 'orange',
  };

  onChange = value => {
    this.setState({
      value,
    });
  };

  render() {
    return (
      <div>
        <span style={{ fontSize: 14 }}>
          <label id="groupId">Choose fruit: </label>
        </span>
        <br />
        <br />
        <Checkbox.Group
          value={this.state.value}
          onChange={this.onChange}
          aria-labelledby="groupId"
        >
          <Checkbox id="apple" value="apple">
            Apple
          </Checkbox>
          <Checkbox id="watermelon" value="watermelon">
            Watermelon
          </Checkbox>
          <Checkbox id="orange" value="orange">
            Orange
          </Checkbox>
        </Checkbox.Group>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('checkbox-demo-5'));