React 18 Material UI Create and Customize Checkbox Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

React Material UI Checkbox example. The input checkbox type property is used to create a checkbox. The checkbox is ideally a square box; a ticked state is known as the activated state.

Theoretically, checkboxes are used when you have a list of options, and there is a probability that the user may choose one or more than one options at a time.

In this post, we will learn how to implement a simple checkbox list with multiple options in React JS application using the React material UI checkbox component in a functional component.

The checkbox is easy to create in React. Moreover, the checkbox provides flexible yet profound flexibility to users, especially when it comes to turn on and off things.

We will show you how to create a checkbox list using the Material UI Checkbox component in React environment.

How to Implement and Customize Checkbox Component in React with Material UI

Step 1: Build React App
Step 2: Register React Material UI
Step 3: Make Function Component
Step 4: Build React Checkbox Component
Step 5: Register Component in App
Step 6: Test App on Browser

Build React App

We are going to follow the conventional way of building a new React app.

Just, navigate to the terminal, open the console screen, type the command, and hit enter.

Ensure that you have installed Node and Npm on your development system.

npx create-react-app react-blog-app

Move into the project’s root:

cd react-blog-app

Register React Material UI

In order to set up material UI, we must install the React material UI, styled and font packages in React application.

npm i @mui/material @emotion/react @emotion/styled --legacy-peer-deps

npm install @fontsource/roboto --legacy-peer-deps

As soon as the imperative packages are installed, we have to import the fonts CSS in App.css file.

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

Make Function Component

A function component is just another JavaScript function; It controls the particular functionality associated with the functional component itself.

Go ahead and make the components/ directory, and also create the Users.js file.

import React from 'react'

function Users() {
  return (
    <div>Users page</div>
  )
}

export default Users

Build React Checkbox Component

We imported the Checkbox, icon, and color modules; inside the return method, we set the Checkbox component. We created the Checkbox with various sizes, colors, and icons in React.

Insert the code into the components/Users.js file.

import * as React from "react";
import { pink } from "@mui/material/colors";
import Checkbox from "@mui/material/Checkbox";
import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
import BookmarkIcon from "@mui/icons-material/Bookmark";
const label = { inputProps: { "aria-label": "Checkbox demo" } };

function Users() {
  return (
    <div>
      <Checkbox {...label} defaultChecked />
      <Checkbox {...label} defaultChecked color="secondary" />
      <Checkbox {...label} defaultChecked color="success" />

      <Checkbox
        {...label}
        icon={<BookmarkBorderIcon />}
        checkedIcon={<BookmarkIcon />}
      />

      <Checkbox
        {...label}
        defaultChecked
        sx={{
          color: pink[800],
          "&.Mui-checked": {
            color: pink[600],
          },
          "& .MuiSvgIcon-root": { fontSize: 50 },
        }}
      />
    </div>
  );
}

export default Users;

Register Component in App

If you have gone through every step by now, that means you have successfully developed the checkbox component.

Let us register the User component inside the App.js file.

import React from "react";
import Users from "./components/Users";

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

export default App;

Test App on Browser

We have mentioned a single command below, this is required to run the react server.

Now, you can start the app and view it on the browser.

npm start

http://localhost:3000

React Material UI Create and Customize Checkbox Tutorial

Conclusion

In all the previous sections, we went through the easy yet conventional way of creating the checkbox component in React.

We looked at the procedure for integrating the checkbox component in React function.

React Material UI provides ease when it comes to customizing the checkbox component.

We learned how to change the color, size, and icon of the checkbox component with the material UI library.