Selection Controls

Selection controls allow the user to select options. Three types of selection controls are covered in this section:

Checkboxes

To show this type of Selection Controls you will need this code in down here.

<FormGroup>
    <FormControlLabel
            control={
            <Checkbox color="primary"
                      checked={this.state.checkedA}
                      onChange={this.handleChange('checkedA')}
                      value="checkedA" />
        }
        label="Pizza" />
    <FormControlLabel
            control={
            <Checkbox color="primary"
                      checked={this.state.checkedB}
                      onChange={this.handleChange('checkedB')}
                      value="checkedB"  />
        }
        label="Burger" />

    <FormControlLabel
            control={
            <Checkbox color="primary"
                      checked={this.state.checkedC}
                      onChange={this.handleChange('checkedC')}
                      value="checkedC" />
        }
        label="Doughnut" />

</FormGroup>

Radio Buttons

     
<FormControl component="fieldset" required>
    <FormHelperText className="text-grey">Storage In Basic Plan</FormHelperText>
        <RadioGroup
                value={this.state.value}
                onChange={this.handleChange}>
            <FormControlLabel value="gb1" control={<Radio color="primary"/>} label="1 GB"/>
            <FormControlLabel value="gb5" control={<Radio color="primary"/>} label="5 GB"/>
            <FormControlLabel value="gb50" control={<Radio color="primary"/>} label="50 GB"/>
        </RadioGroup>
    <FormHelperText className="text-danger">Your error message goes here.</FormHelperText>
</FormControl>