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 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 (<FormControlLabelcontrol={<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.
🛈 React School creates templates and video courses for building beautiful apps with React. Download our free Material UI template.