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 from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
function App() {
  const [checked, setChecked] = React.useState(true);
  const handleChange = (event) => {
    setChecked(event.target.checked);
  };
  return (
    <FormControlLabel
      control={<Checkbox checked={checked} onChange={handleChange} />}
      label="Check me"
    />
  );
}

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