React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI Select Input. A select component is used for collecting user-provided data from a list of options.
React MUI Select Input Props:
- autowidth: If it is true, the width of the popover will automatically be set according to the items inside the menu, else it will be at least the width of the select input.
- children: It denotes the <option> elements that represent the items in the select list.
- classes: It denotes the styles to override the default ones.
- defaultOpen: It denotes the component is opened initially.
- defaultValue: It denotes the default value.
- displayEmpty: If true, a value is displayed even if no items are selected.
- IconComponent: It denotes the icon that displays the arrow in the NativeSelect component
- id: It denotes the id of a wrapper element.
- input: It denotes the Input element, not necessarily specific to the MUI Input component
- inputProps: It denotes the attributes applied to the NativeSelect component
- label: It denotes the label of select.
- labelId: It denotes the ID of an element that acts as an additional label.
- MenuProps: It denotes props allied to the menu element.
- multiple: If true, the value must be an array and the menu will support multiple selections.
- native: It denotes, If it is true, the component uses a native select element.
- onChange: It denotes the callback function that is triggered when the active element is changed.
- onClose: It denotes the callback fired when the component requests to be closed.
- onOpen: It denotes the callback fired when the component requests to be opened.
- renderValue: It renders the selected value.
- sx: It denotes a system prop that allows defining system overrides and additional CSS styles.
- value: It denotes the input value.
- variant: It denotes the variant to use for NativeSelect.
React MUI NativeSelect Props:
- children: It denotes the <option> elements that represent the items in the select list.
- classes: It denotes the styles to override the default ones.
- IconComponent: It denotes the icon that displays the arrow in the NativeSelect component
- input: It denotes the Input element, not necessarily specific to the MUI Input component
- inputProps: It denotes the attributes applied to the NativeSelect component
- onChange: It denotes the callback function that is triggered when the active element is changed.
- sx: It denotes a system prop that allows defining system overrides and additional CSS styles.
- value: It denotes the input value.
- variant: It denotes the variant to use for NativeSelect.
Creating React Project:
Step 1: To create a react app, you need to install react modules through npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Step to Run Application:
npm start
Example 1: Below example demonstrates the React MUI Select Input.
Javascript
import React from "react"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; import Select from "@mui/material/Select"; function App() { const [algorithm, setAlgorithm] = React.useState(""); const handleChange = (event) => { setAlgorithm(event.target.value); }; return ( <div> <div style={{ textAlign: "center", color: "green" }}> <h1>neveropen</h1> <h2>React MUI Select Input</h2> </div> <div style={{ textAlign: "center" }}> <FormControl sx={{ m: 1, minWidth: 200 }}> <InputLabel id="demo-simple-select-label"> Algorithm </InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" value={algorithm} label="Algorithm" onChange={handleChange} > <MenuItem value={1}>Stack</MenuItem> <MenuItem value={2}>Queue</MenuItem> <MenuItem value={3}>Array</MenuItem> </Select> </FormControl> </div> </div> ); } export default App; |
Output:
Example 2: Below example demonstrates the React MUI multiple select input as a chip.
Javascript
import React from "react"; import OutlinedInput from '@mui/material/OutlinedInput'; import InputLabel from '@mui/material/InputLabel'; import { useTheme } from '@mui/material/styles'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; import Chip from '@mui/material/Chip'; import { Box } from "@mui/system"; import { MenuItem } from "@mui/material"; const ITEM_HEIGHT = 45; const ITEM_PADDING_TOP = 5; const MenuProps = { PaperProps: { style: { maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, width: 250, }, }, }; const names = [ 'Stack', 'Queue', 'Array']; function getStyles(algo, algorithm, theme) { return { fontWeight: algorithm.indexOf(algo) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium, }; } function App() { const theme = useTheme(); const [algorithm, setAlgorithm] = React.useState([]); const handleChange = (event) => { const { target: { value }, } = event; setAlgorithm( typeof value === 'string' ? value.split(',') : value, ); }; return ( <div> <div style={{ textAlign: "center", color: "green" }}> <h1>neveropen</h1> <h2>React MUI Select Input</h2> </div> <div style={{ textAlign: "center" }}> <FormControl sx={{ m: 1, width: 300 }}> <InputLabel id="demo-multiple-chip-label"> Algorithm </InputLabel> <Select labelId="demo-multiple-chip-label" multiple value={algorithm} onChange={handleChange} input={<OutlinedInput id="select-multiple-chip" label="Algorithm" />} renderValue={(selected) => ( <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}> {selected.map((value) => ( <Chip key={value} label={value} /> ))} </Box> )} MenuProps={MenuProps} > {names.map((algo) => ( <MenuItem key={algo} value={algo} style={getStyles(algo, algorithm, theme)} > {algo} </MenuItem> ))} </Select> </FormControl> </div> </div> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/react-select/
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
