React Tutorial- How To Create And Customize Checkbox In React Material UI Example

React Material UI Checkbox Tutorial; Checkboxes are used when we have a list of options and there is a probability that the user may choose one or more than one option at a time.

In this React tutorial, we will learn how to implement a simple checkbox list with multiple options in React JS app using the React Material UI Checkbox Component in a functional component.

 

How To Implement And Customize Checkbox Component In React With Material UI

Step 1- Build React App

First of all, we need to install Node and NPM on our development system.

Then, we will navigate to the terminal, open the console screen, type the command and hit enter:

npx create-react-app react-blog-app

Next, we move to the project’s root:

cd react-blog-app

 

Step 2- Register React Material UI

Here, we will set up Material UI by using the below command. We must install Material UI, styled and font packages in React app:

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

npm install @fontsource/roboto

 

After installing the imperative packages, we move to import the fonts CSS in the 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";

 

Step 3- Make The Function Component

In the third step, we will 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

 

Step 4- 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.

Afterward, we need to insert the code into the components/User.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;

 

Step 5- Register the Component In App

Since we have already developed the Checkbox component, now we will 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;

 

Step 6- Test the App On The Browser

In the final step, we will be using the below command in order to run the React server where we can start the app:

npm start

 

Conclusion

In this React tutorial, we have seen how to integrate the Checkbox component in React function.

We have used Material UI which provides the option of customizing the Checkbox component. We have also learned to change the color, size and icon of the checkbox component with the Mteril UI library.

 

Thanks