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", }} > neveropen </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", }} > neveropen </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> ); } |
Output:
Reference: https://mui.com/material-ui/react-select/
