Material UI > Material UI Checkbox

Material UI Checkbox Tutorial and Examples | React.School

The Material UI Checkbox works by using the browser's native input HTML element, inside of a Material UI IconButton to create the ripple and button effects. The native checkbox input is hidden and instead a checkbox SVG icon (or a custom icon of your choice) is used. This is a fairly simple component.

How to set a Material UI Checkbox

Using the Material UI Checkbox is essentially the same as native React inputs. You have a checked prop, a boolean set to either true or false, which determines whether the Checkbox is checked or not. You use the onChange prop and React hooks to set and maintain the state of the checkbox. In the event handler, we can look at event.target.checked to know what the new state value should be set to. For handling multiple checkboxes, we can look at the target.name to identify which checkbox we touched and then store that as a key in our React state. Check out the below examples to see this in action.

Checkbox Bare Minimum Example

import React, { useState } from "react";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";

export default function CheckboxLabels() {
  const [checked, setChecked] = useState(true);
  const handleChange = (e) => {
    setChecked(event.target.checked);
  };

  return (
    <FormGroup>
      <FormControlLabel
        control={<Checkbox checked={checked} onChange={handleChange} />}
        label="Check it out"
      />
    </FormGroup>
  );
}

Material UI Checkbox color

To change the color of a Material UI Checkbox, you can use the color prop if you want to set to one of the standard color props in Material UI: default, primary or secondary. However, if you want to use your own custom color, you will need to make use of the withStyles hook to target the CSS rules. See the example below to understand how to do this.

Checkbox disabled / disableRipple

To disable the Checkbox, use the disabled prop. This will gray the component out and set the disabled prop on the HTML input, which will prevent users from being able to toggle it. The disableRipple prop removes the ripple effect on clicking of the checkbox.

Small Checkbox with size prop

By default, the Checkbox has a size prop which is set to medium. You can set to one other option, size="small" to make the checkbox smaller.

Setting a Checkbox label

To set a checkbox label, you will need to make use of the FormControlLabel component. Import this component and insert your Checkbox component inside the control prop, and write your checkbox label inside the label prop.

Making a Checkbox required in a form

To make a checkbox required inside of a form with a normal HTML input, we would simply set the required attribute. This Material UI Checkbox is the same. We set the required attribute on the Checkbox. We also should make sure this component is inside of a FormControl component. This ensures that we are passing the form context down to the Material UI input.

Official Docs for Material UI Checkbox

Checkbox API

Lesson 7/12

import React, { useState } from "react";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import FormLabel from "@mui/material/FormLabel";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";

function SimpleExample() {
  const [checked, setChecked] = useState(true);
  const handleChange = (e) => {
    setChecked(event.target.checked);
  };

  return (
    <>
      {" "}
      <Typography variant="h5">Simple Checkbox</Typography>
      <FormGroup>
        <FormControlLabel
          control={<Checkbox checked={checked} onChange={handleChange} />}
          label="Check it out"
        />
      </FormGroup>{" "}
    </>
  );
}

function AdvancedExamples() {
  // Checkbox State
  const [checked, setChecked] = useState(true);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

  // Checkbox Group
  const [flavors, setFlavors] = useState({
    chocolate: true,
    vanilla: false,
    strawberry: false,
  });

  const { chocolate, vanilla, strawberry } = flavors;

  const handleFlavorChange = (event) => {
    setFlavors({ ...flavors, [event.target.name]: event.target.checked });
  };

  return (
    <div>
      <Typography variant="h5">Default Checkbox</Typography>
      <Checkbox checked={checked} onChange={handleChange} />

      <Typography variant="h5">Checkbox Secondary Color</Typography>
      <Checkbox color="secondary" checked={checked} onChange={handleChange} />

      <Typography variant="h5">Checkbox Disabled</Typography>
      <Checkbox
        disabled
        color="primary"
        checked={checked}
        onChange={handleChange}
      />

      <Typography variant="h5">Checkbox Custom Color</Typography>
      <Checkbox
        sx={{
          color: "#13c552",
          "&.Mui-checked": {
            color: "#13c552",
          },
        }}
        checked={checked}
        onChange={handleChange}
      />

      <Typography variant="h5">Checkbox disableRipple</Typography>
      <Checkbox disableRipple checked={checked} onChange={handleChange} />

      <Typography variant="h5">Checkbox small</Typography>
      <Checkbox size="small" checked={checked} onChange={handleChange} />

      <Typography variant="h5" gutterBottom>
        Checkbox with label
      </Typography>
      <FormControlLabel
        control={<Checkbox checked={checked} onChange={handleChange} />}
        label="Check me"
      />

      <Typography variant="h5" gutterBottom>
        Required Checkbox
      </Typography>

      <form>
        <FormGroup>
          <FormControl>
            <FormControlLabel
              control={
                <Checkbox checked={checked} onChange={handleChange} required />
              }
              label="I agree to the terms"
            />
          </FormControl>
          <FormControl>
            <Button type="submit">Submit</Button>
          </FormControl>
        </FormGroup>
      </form>

      <Typography variant="h5" gutterBottom>
        Checkbox Group
      </Typography>

      <FormControl component="fieldset">
        <FormLabel component="legend">Pick flavors</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox
                checked={chocolate}
                onChange={handleFlavorChange}
                name="chocolate"
              />
            }
            label="Chocolate"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={vanilla}
                onChange={handleFlavorChange}
                name="vanilla"
              />
            }
            label="Vanilla"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={strawberry}
                onChange={handleFlavorChange}
                name="strawberry"
              />
            }
            label="Strawberry"
          />
        </FormGroup>
        <FormHelperText>
          Ice cream may be harmful, consult your doctor.
        </FormHelperText>
      </FormControl>
    </div>
  );
}

export default function CheckboxExamples() {
  return (
    <div>
      <SimpleExample />
      <AdvancedExamples />
    </div>
  );
}

Open Sandbox