how to make disabled mui textfield?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Make disabled mui textfield

To make disabled mui textfield in react js, use the disabled prop, in this prop we can set the true or false flag to handle mui textfield disabled feature.

Users can’t able to change the text of the input field when you set disabled to true.

Today, I am going to show you. how to make disabled mui textfield.

<TextField
  type="text"
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
  onChange={(e) => setText(e.target.value)}
  value={text}
  disabled={true}
/>

Installation

Emotion library is required to create react components that have styles attached to them.

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

MUI material textfield disabled example

To set disabled true in mui textfield, pass disabled true in mui textfield it will make mui text field disabled.

App.js

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function BasicTextFields() {
  const [text, setText] = React.useState("infinitbility.com");

  return (
    <Box component="form">
      <TextField
        type="text"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        onChange={(e) => setText(e.target.value)}
        value={text}
        disabled={true}
      />
    </Box>
  );
}

In the above code example, I set disabled true, you can also try it in the below sandbox.

Check the output of the above code example.

All the best 👍

codesandbox