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.

Installation

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

npm

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

yarn

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.

App.js

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

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.

All the best 👍