React MUI NativeSelect API
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>
);
}
|
Output:
Reference: https://mui.com/material-ui/react-select/
Last Updated :
14 Oct, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...