Reactjs Material-UI Checkbox component

Material Checkbox component in Material-UI Reactjs:

This post will show you how to use the Checkbox component provided by Reactjs Material-UI library. Checkbox can be used instead of switch, if we have multiple options and user can select one or more options using checkbox.

Material-UI checkbox component is customizable and it is really easy to use.

YouTube video:

Import:

Checkbox is defined in @material-ui/core. It can be imported as like below:

import Checkbox from '@material-ui/core/Checkbox';

Example program:

Let's take a look at the below program:

import { Checkbox } from "@material-ui/core";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Checkbox />
      <Checkbox />
    </div>
  );
}

export default App;

Here, I have added two Checkbox components. If you run this program, it will give the below result:

As you can see here, one checkbox is checked and another is not. It takes the secondary color if it is checked by default.

Using state variable to change the checkbox state:

We can use a state value and assign it to a Checkbox component. Below is the complete program:

import { Checkbox } from "@material-ui/core";
import { useState } from "react";
import "./App.css";

function App() {
  const [checked, setChecked] = useState(false);

  const checkChanged = (state) => {
    setChecked(!checked);
  };
  return (
    <div className="App">
      <Checkbox checked={checked} onChange={checkChanged} />
    </div>
  );
}

export default App;

In this example, we are assigning the value of checked to the parameter checked which will change the checked state of the Checkbox. onChange is called if the user clicks on the checkbox.

Disable a Checkbox:

disabled prop is used to disable a Checkbox.

<Checkbox disabled checked={checked} onChange={checkChanged} />

It will disable the checkbox. The state of a disabled checkbox is defined by the checked prop.

Make a checkbox checked by default, defaultChecked:

Also, we can use another prop called defaultChecked to change one checkbox checked by default.

<Checkbox disabled defaultChecked/>

It will create one disabled Checkbox that is checked by default.

Change the color of a Checkbox:

color props is used to change the color of a checkbox. For example:

<Checkbox defaultChecked color='primary'/>

It will change the color to primary.

Change the size of a Checkbox:

We can use size props to change the size of a checkbox. We have small, medium and large sizes available.

<div className="App">
    <Checkbox defaultChecked color='primary' size='small'/>
    <Checkbox defaultChecked color='primary' size='medium'/>
    <Checkbox defaultChecked color='primary' size='large'/>
</div>

It will create:

Indeterminate:

We can create indeterminate checkbox. These are checkbox without a tick mark, but with a - mark. For example:

<div className="App">
    <Checkbox checked={true} color='primary' indeterminate/>
    <Checkbox checked={false} color='primary' indeterminate/>
</div>

It will create: