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.

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/