- The Code Mon

In this React tutorial, we will learn how to create an indeterminate checkbox with the help of React material UI in a fully functional component.

Generally, if the checkbox is indeterminate, 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

The primary step is to install Node and NPM. We move on to the console, type the command and press enter to create a new app:

npx create-react-app react-blog-app

Now, we move into the app directory:

cd react-blog-app

Step 2- Configure React Material UI

In this step, we will use the below command to install React material UI, Styled and font libraries:

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

npm install @fontsource/roboto

Now, we open the App.css file and add the font families as given:

@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";

Step 3- Build Function Component

Here, we will navigate to the src/ folder, and create the components/ folder. In addition, we make the Form.js file:

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

Step 4- Implement The Indeterminate Checkbox

Below is the code that can get us closer to the React indeterminate checkbox example.

We will update the given 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;

Step 5- Update The Global Component

Finally, we have reached the stage where we only have to register the Form component into React’s main component.

For that, we need to open and add the below 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;

Step 6- Run The App On Browser

Now, we will run the app on the development server. We will use the given command for the purpose:

npm start

Conclusion

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

Thanks

React Tutorial- Material UI Indeterminate Checkbox Example