React MUI NativeSelect API

Last Updated : 14 Oct, 2022

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top Material Design by Google. In this article let’s discuss the NativeSelect API in the Material-UI library.

NativeSelect API offered by MUI: NativeSelect API is used for collecting user-provided information from a list of options. It uses the native selection of the platform to render the options in the form of a dropdown list.

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 Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material

Project Structure: It will look like the following.

Example 1: In this example, we will try to create a simple dropdown application that uses NativeSelect component to represent a list of items. Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

App.js

import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import NativeSelect from '@mui/material/NativeSelect';

export default function BasicButtonGroup() {
    return (
        <div>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI NativeSelect API</strong>
                <br />
                <br />
            </div>
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <Box sx={{ minWidth: 120 }}>
                    <FormControl fullWidth>
                        <InputLabel variant="standard"
                            htmlFor="uncontrolled-native">
                            Age
                        </InputLabel>
                        <NativeSelect
                            defaultValue=""
                            inputProps={{
                                name: 'age',
                                id: 'uncontrolled-native',
                            }}
                        >
                            <option value={10}>Ten</option>
                            <option value={20}>Twenty</option>
                            <option value={30}>Thirty</option>
                        </NativeSelect>
                    </FormControl>
                </Box>
            </div>
        </div>
    );
}

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, let's disable some options in the dropdown list so that the user won't be able to select them. Change your App.js like the one below.

App.js

import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import NativeSelect from '@mui/material/NativeSelect';

export default function BasicButtonGroup() {
    return (
        <div>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI NativeSelect API</strong>
                <br />
                <br />
            </div>
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <Box sx={{ minWidth: 120 }}>
                    <FormControl fullWidth>
                        <InputLabel variant="standard"
                            htmlFor="uncontrolled-native">
                            Age
                        </InputLabel>
                        <NativeSelect
                            defaultValue=""
                            inputProps={{
                                name: 'age',
                                id: 'uncontrolled-native',
                            }}
                        >
                            <option disabled value={10}>
                                  Ten
                            </option>
                            <option value={20}>Twenty</option>
                            <option value={30}>Thirty</option>
                        </NativeSelect>
                    </FormControl>
                </Box>
            </div>
        </div>
    );
}