How to disabled mui select in react js?
February 15, 2023Hi Friends 👋,
Welcome To aGuideHub!
To disabled mui select in React js, you can use disabled={disabled}. It will disabled mui select in React js.
Today, I am going to show you, how to disabled mui select in react js.
Installation
Install the following packages to use disabled mui select in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material disabled mui select example.
The below code is an example of disabled mui select using, set this to true to disable the Select.
App.js
import * as React from 'react';
import { Select, MenuItem } from '@mui/material';
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
];
export default function MySelect() {
const [value, setValue] = React.useState('option1');
const disabled = true; // set this to true to disable the Select
return (
<Select value={value} onChange={(event) => setValue(event.target.value)} disabled={disabled}>
{options.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
);
}In the above code example, I have used the @mui/material component and disabled mui select.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program disabled mui select. Then you can use whenever you want and do the changes as per your requirements.
All the best 👍