How to make readonly mui checkbox in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To make readonly mui checkbox in React js, you can use <Checkbox disabled/>. It will make readonly mui checkbox.

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

Installation

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

npm

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

yarn

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

First method: Disabled

MUI material make readonly mui checkbox example.

The below code is an example of a Material UI Checkbox that is disabled, which means that the user cannot click on it and cannot write.

App.js

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

export default function ColorCheckboxes() {
  return (
    <FormControlLabel
    control={
      <Checkbox
        disabled
      />
    }
    label="My Checkbox"
  />
  );
}

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

Check the output of the above code example.

Second method: Function Checkboxes

MUI material make readonly mui checkbox example.

The below code is an example of a Material UI Checkbox that is disabled, which means that the user cannot click on it and cannot write.

App.js

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

export default function Checkboxes() {
  const [checked] = React.useState(false);

  const handleChange = event => {
    event.preventDefault();
      return false;
  };

  return (
    <div>
      <Checkbox
        checked={checked}
        onChange={handleChange}
      />
    </div>
  );
}

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

Check the output of the above code example.

All the best 👍