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>w3wiki</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>w3wiki</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/
React MUI Select Input
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.