How to make mui checkbox with label in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To make mui checkbox with the label in React js, you have to use the label attribute and pass a label text in it. Then it will make mui checkbox with the label.

Today, I am going to show you, how to make mui checkbox with label in react js.


Install the following packages to use mui checkbox with label in react js.


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


yarn add @mui/material @emotion/react @emotion/styled

MUI material make checkbox with label example.

The below code is an example of making mui checkbox with label using mui.


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 CheckboxLabels() {
  return (
      <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />

In the above code example, I have used the @mui/material component and made checkbox with label.

Check the output of the above code example.

React, Mui ckeckbox with lable

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts