title: How to set a max number of checked boxes
body: <p>I have a list of option with a corresponding checkbox (Material-UI)
  And I'm trying to figure out how I Can set a max number on checked boxes
  (for instance, I would only want the user to be able to click three and then disable the rest)
  Do I do this in the state?</p>
  
  <pre><code>const styles = theme =&gt; ({
    root: {
      width: '100%',
      maxWidth: 260,
      backgroundColor: theme.palette.background.paper,
    },
  });
  
  class CheckboxList extends React.Component {
    state = {
      checked: [0],
    };
  
    handleToggle = value =&gt; () =&gt; {
      const { checked } = this.state;
      const currentIndex = checked.indexOf(value);
      const newChecked = [...checked];
  
      if (currentIndex === -1) {
        newChecked.push(value);
      } else {
        newChecked.splice(currentIndex, 1);
      }
  
      this.setState({
        checked: newChecked,
      });
    };
  
    render() {
      const { classes } = this.props;
      const toppings = ['Chicken', 'Pineapple', 'Corn', 'Olives (green)', 'Red union', 'Spinach', 'Cherry tomatoes']
      return (
        &lt;div className={classes.root}&gt;
          &lt;List&gt;
            {toppings.map(value =&gt; (
              &lt;ListItem
                key={value}
                role={undefined}
                dense
                button
                onClick={this.handleToggle(value)}
                className={classes.listItem}
              &gt;
                &lt;Checkbox
                  checked={this.state.checked.indexOf(value) !== -1}
                  tabIndex={-1}
                  disableRipple
                /&gt;
                &lt;ListItemText primary={`NewAge ${value}`} /&gt;
  
              &lt;/ListItem&gt;
            ))}
          &lt;/List&gt;
        &lt;/div&gt;
      );
    }
  }
  
  CheckboxList.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(CheckboxList);
  </code></pre>