how to make read only mui textfield?
August 01, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Make read only mui textfield
To make read only mui textfield in react js, use the inputProps prop, in this prop we can set the readOnly flag to handle mui textfield read-only feature.
User can’t able to change the text of the input field when you set readOnly to true.
Today, I am going to show you. how to make read-only mui textfield.
<TextField
type="text"
id="outlined-basic"
label="Outlined"
variant="outlined"
onChange={(e) => setText(e.target.value)}
value={text}
InputProps={{
readOnly: true,
}}
/>Installation
Emotion library is required to create react components that have styles attached to them.
npm install @mui/material @emotion/react @emotion/styledMUI material textfield readOnly example
To set readOnly true in mui textfield, pass readOnly true in inputProps prop it will make mui text field read-only.
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}
InputProps={{
readOnly: true
}}
/>
</Box>
);
}In the above code example, I set readOnly to true, you can also try it in the below sandbox.
Check the output of the above code example.
All the best 👍