How to Create React Material UI Checkbox Component in React

A checkbox is laid on the browser’s page as a tiny square box on the screen. This small UI component has two states: checked and unchecked. The square box contains a checkmark when it is in a checked state.

In this tutorial, you will find out how to create a basic checkbox component in React function component. Moreover, we will tell you how to customize React material UI Checkbox component profoundly.

Checkboxes allow u to choose one or more items from a given options list. Furthermore, checkboxes may be used to switch on or off certain settings.

We will take certain or required steps to implement React MUI checkbox component in React. You will be taught to prepare a basic React app with a function component. We will install and set up React material UI library to use the checkbox component in React.

Let’s find out how to create and customize React MUI checkbox component.

Setting Up React Project

You can see we have given a command — this command allows you to create a new React app.

However, ensure that you have installed node and npm on your system.

npx create-react-app react-blog

Add React Material UI

The main purpose of React MUI library is to reduce the module development time; hence we will install the library using the given command.

npm install @mui/material @emotion/react @emotion/styled @fontsource/roboto

Head over to App.css file; over here we need to add the following CSS modules.

@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 New Component

In this step, you have to create the features folder within the src/ folder.

Next up, you have to create the Home.js file.

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Create Basic React MUI Checkbox

We are now ready with the function component. To build the checkbox component, you have to import the module and define it as we have described.

Update code in features/Home.js file.

import React from "react";
import Home from "./features/Home";

function App() {
  return (
    <div>
      <h2>React Material UI Checkbox Component Example</h2>
      <Home />
    </div>
  );
}

export default App;

Add Label in React MUI Checkbox

We can quite easily add a label to the Checkbox, and this task is made possible with the FormControlLabel component.

import * as React from "react";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";

export default function Home() {
  return (
    <FormGroup>
      <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
      <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
    </FormGroup>
  );
}

Change Checkbox Color

The colour can be changed or customized easily; you have to add the color property and pass the color name.

import * as React from "react";
import { pink } from "@mui/material/colors";
import Checkbox from "@mui/material/Checkbox";

const label = { inputProps: { "aria-label": "Checkbox demo" } };

export default function Home() {
  return (
    <div>
      <Checkbox {...label} defaultChecked />
      <Checkbox {...label} defaultChecked color="secondary" />
      <Checkbox {...label} defaultChecked color="success" />
      <Checkbox {...label} defaultChecked color="default" />
      <Checkbox
        {...label}
        defaultChecked
        sx={{
          color: pink[800],
          "&.Mui-checked": {
            color: pink[600],
          },
        }}
      />
    </div>
  );
}

Change Checkbox Size

Similarly, we can change the size of the checkbox module. It requires the use of the size prop to change the size of the checkboxes.

import * as React from 'react';
import Checkbox from '@mui/material/Checkbox';

const label = { inputProps: { 'aria-label': 'Checkbox demo' } };

export default function Home() {
  return (
    <div>
      <Checkbox {...label} defaultChecked size="small" />
      <Checkbox {...label} defaultChecked />
      <Checkbox
        {...label}
        defaultChecked
        sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
      />
    </div>
  );
}

Add Home Component

As we know, we have created a separate Home component.

React serves all the components through the App.js component; therefore, we have to import the home component in the main component.

import React from "react";
import Home from "./features/Home";

function App() {
  return (
    <div>
      <h2>React Material UI Checkbox Component Example</h2>
      <Home />
    </div>
  );
}

export default App;

Run App on Browser

You need to run the ‘npm start’ command. It is used for executing a startup script without typing its execution command.

This command will serve the app directly on the browser.

npm start
http://localhost:3000

How to Create React Material UI Checkbox Component in React