How to create mui select with error text in react js?
February 24, 2023Hi Friends 👋,
Welcome To aGuideHub!
To create mui select with error text in React js, you can use this code <FormHelperText>Error</FormHelperText>. It will create mui select with error text in react js.
Today, I am going to show you, how to create mui select with error text in react js.
Installation
Install the following packages to use error text of mui select in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material create mui select with error text example.
The below code is an example of a Material UI select. You have to import @mui material select and first import the FormHelperText in react js then use this code <FormHelperText>Error</FormHelperText>. It will create mui select with error text.
App.js
import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
export default function SelectOtherProps() {
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div>
<FormControl sx={{ m: 1, minWidth: 120 }} error>
<InputLabel id="demo-simple-select-error-label">Age</InputLabel>
<Select
labelId="demo-simple-select-error-label"
id="demo-simple-select-error"
value={age}
label="Age"
onChange={handleChange}
renderValue={(value) => `⚠️ - ${value}`}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Error</FormHelperText>
</FormControl>
</div>
);
}In the above code example, I have used the @mui/material component and created mui select with error text.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program create mui select with error text. Then you can use whenever you want and do the changes as per your requirements.
All the best 👍
