Skip to content
Edit this page

NativeSelect API

API reference docs for the React NativeSelect component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import NativeSelect from '@mui/material/NativeSelect';
// or
import { NativeSelect } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.

An alternative to <Select native /> with a much smaller bundle size footprint.

Props

Props of the Input component are also available.

children

The option elements to populate the select with. Can be some <option> elements.

Type:

node
classes

Override or extend the styles applied to the component.

Type:

object

Default:

{}
IconComponent

The icon that displays the arrow.

Type:

elementType

Default:

ArrowDropDownIcon
input

An Input element; does not have to be a material-ui specific Input.

Type:

element

Default:

<Input />
inputProps

Attributes applied to the select element.

Type:

object
onChange

Callback fired when a menu item is selected.

Type:

func

Signature:

function(event: React.ChangeEvent) => void
  • event The event source of the callback. You can pull out the new value by accessing event.target.value (string).
sx

The system prop that allows defining system overrides as well as additional CSS styles.

Type:

Array<func | object | bool> | func | object
value

The input value. The DOM API casts this to a string.

Type:

any
variant

The variant to use.

Type:

'filled' | 'outlined' | 'standard'
The ref is forwarded to the root element.

Inheritance

While not explicitly documented above, the props of the Input component are also available in NativeSelect. You can take advantage of this to target nested components.

Theme default props

You can use MuiNativeSelect to change the default props of this component with the theme.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiNativeSelect-rootroot

Styles applied to the root element.

.MuiNativeSelect-selectselect

Styles applied to the select component select class.

.MuiNativeSelect-multiplemultiple

Styles applied to the select component if multiple={true}.

.MuiNativeSelect-filledfilled

Styles applied to the select component if variant="filled".

.MuiNativeSelect-outlinedoutlined

Styles applied to the select component if variant="outlined".

.MuiNativeSelect-standardstandard

Styles applied to the select component if variant="standard".

.Mui-disableddisabledSTATE

State class applied to the select component disabled class.

.MuiNativeSelect-iconicon

Styles applied to the icon component.

.MuiNativeSelect-iconOpeniconOpen

Styles applied to the icon component if the popup is open.

.MuiNativeSelect-iconFillediconFilled

Styles applied to the icon component if variant="filled".

.MuiNativeSelect-iconOutlinediconOutlined

Styles applied to the icon component if variant="outlined".

.MuiNativeSelect-iconStandardiconStandard

Styles applied to the icon component if variant="standard".

.MuiNativeSelect-nativeInputnativeInput

Styles applied to the underlying native input component.

.Mui-errorerrorSTATE

State class applied to the select component error class.

You can override the style of the component using one of these customization options: