React MUI Select is an input component that provides the options, multi select and autocomplete functionalities. This component is used for collecting user-provided data from a list of options.
React MUI Select Input Syntax:
<Select
onChange={handleChange}
>
<MenuItem value={1}>Item 1</MenuItem>
<MenuItem value={2}>Item 2</MenuItem>
<MenuItem value={3}>Item 3</MenuItem>
</Select>
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.
React MUI Select Input Examples:
Below are basic implementations of MUI Select Input.
Example 1: React MUI Select Input Implementation
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>GeeksforGeeks</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: React MUI Select Input as Chip
this 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>GeeksforGeeks</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/