React Material UI Indeterminate Checkbox Example Tutorial

Typically, a checkbox form component has checked and unchecked states. Either you want to submit the checkbox value or not. However, a checkbox might have three states: checked, unchecked and indeterminate.

In this tutorial, you will teach yourself how to quite easily create an indeterminate checkbox with the help of React material UI in a fully functional component.

In general, if the checkbox is in an indeterminate state, It only affects the form submitted values. The indeterminate is a visual state only. The checkbox is either checked or unchecked as a state.

How to Create Indeterminate Checkbox Component in React with Material UI

• Step 1: Set Up New Project
• Step 2: Configure React Material UI
• Step 3: Build Function Component
• Step 4: Implement Indeterminate Checkbox
• Step 5: Update Global Component
• Step 6: Run App on Browser

Set Up New Project

The best and the easy way to install a React app is to use any command-line tool.

If the node and npm is installed, move on to the console, type the command, and press enter to create a new app.

npx create-react-app react-blog-app

Move into the application directory:

cd react-blog-app

Configure React Material UI

In this step, you will be using the following command to install: React material UI, Styled and font libraries

npm i @mui/material @emotion/react @emotion/styled

npm install @fontsource/roboto

Go ahead and open the App.css file, then add the font families as instructed.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

Build Function Component

We have given an example below about how to create a simple function component in React.

Navigate to the src/ folder, create the components/ folder, not only but also make the Form.js file.

import React from 'react'
function Form() {
  return (
    <div>Form page</div>
  )
}
export default Form

Implement Indeterminate Checkbox

Well, the purpose of the checkbox component is to set checked, unchecked or indeterminate state. Here is the code that can get you closer to the React indeterminate checkbox example.

Update code in the components/Form.js file.

import * as React from "react";
import Box from "@mui/material/Box";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
function Form() {
  const [checked, setChecked] = React.useState([true, false]);
  const handleChange1 = (event) => {
    setChecked([event.target.checked, event.target.checked]);
  };
  const handleChange2 = (event) => {
    setChecked([event.target.checked, checked[1]]);
  };
  const handleChange3 = (event) => {
    setChecked([checked[0], event.target.checked]);
  };
  const children = (
    <Box sx={{ display: "flex", flexDirection: "column", ml: 3 }}>
      <FormControlLabel
        label="Child 1"
        control={<Checkbox checked={checked[0]} onChange={handleChange2} />}
      />
      <FormControlLabel
        label="Child 2"
        control={<Checkbox checked={checked[1]} onChange={handleChange3} />}
      />
    </Box>
  );
  return (
    <div>
      <FormControlLabel
        label="Parent"
        control={
          <Checkbox
            checked={checked[0] && checked[1]}
            indeterminate={checked[0] !== checked[1]}
            onChange={handleChange1}
          />
        }
      />
      {children}
    </div>
  );
}
export default Form;

Update Global Component

We have now ultimately reached to the stage where we only have to register the Form component into the React’s main component.

Open and add the code into the App.js file.

import React from "react";
import Form from "./components/Form";
function App() {
  return (
    <div>
      <h2>React Material UI Indeterminate Checkbox Example</h2>
      <Form />
    </div>
  );
}
export default App;

Run App on Browser

Now the React app is ready, all you have to do is just run the development server.

Hence, make sure to invoke the suggested command.

npm start

http://localhost:3000

Conclusion

In this guide, we learned how to build a nested checkbox through an indeterminate checkbox component.

We used the Material UI library to implement the indeterminate checkbox in React JS application.