---
filename: /packages/material-ui/src/Select/Select.js
title: Select API
---
# Select
The API documentation of the Select React component. Learn more about the properties and the CSS customization points.
```js
import Select from '@material-ui/core/Select';
```
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| autoWidth | bool | false | If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input. |
| children | node | | The option elements to populate the select with. Can be some `MenuItem` when `native` is false and `option` when `native` is true. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
| displayEmpty | bool | false | If `true`, the selected item is displayed even if its value is empty. You can only use it when the `native` property is `false` (default). |
| IconComponent | union: string |
func |
object
| ArrowDropDownIcon | The icon that displays the arrow. |
| input | element | <Input /> | An `Input` element; does not have to be a material-ui specific `Input`. |
| inputProps | object | | Attributes applied to the `input` element. When `native` is `true`, the attributes are applied on the `select` element. |
| MenuProps | object | | Properties applied to the [`Menu`](/api/menu/) element. |
| multiple | bool | false | If true, `value` must be an array and the menu will support multiple selections. You can only use it when the `native` property is `false` (default). |
| native | bool | false | If `true`, the component will be using a native `select` element. |
| onChange | func | | Callback function fired when a menu item is selected.
**Signature:**
`function(event: object, child?: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.
*child:* The react element that was selected when `native` is `false` (default). |
| onClose | func | | Callback fired when the component requests to be closed. Use in controlled mode (see open).
**Signature:**
`function(event: object) => void`
*event:* The event source of the callback |
| onOpen | func | | Callback fired when the component requests to be opened. Use in controlled mode (see open).
**Signature:**
`function(event: object) => void`
*event:* The event source of the callback |
| open | bool | | Control `select` open state. You can only use it when the `native` property is `false` (default). |
| renderValue | func | | Render the selected value. You can only use it when the `native` property is `false` (default).
**Signature:**
`function(value: any) => ReactElement`
*value:* The `value` provided to the component. |
| SelectDisplayProps | object | | Properties applied to the clickable div element. |
| value | union: string |
number |
bool |
arrayOf
| | The input value. This property is required when the `native` property is `false` (default). |
| variant | enum: 'standard' |
'outlined' |
'filled'
| | The variant to use. |
Any other properties supplied will be spread to the root element ([Input](/api/input/)).
## CSS API
You can override all the class names injected by Material-UI thanks to the `classes` property.
This property accepts the following keys:
| Name | Description |
|:-----|:------------|
| root | Styles applied to the `Input` component `root` class.
| select | Styles applied to the `Input` component `select` class.
| filled | Styles applied to the `Input` component if `variant="filled"`.
| outlined | Styles applied to the `Input` component if `variant="outlined"`.
| selectMenu | Styles applied to the `Input` component `selectMenu` class.
| disabled | Styles applied to the `Input` component `disabled` class.
| icon | Styles applied to the `Input` component `icon` class.
Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Select/Select.js)
for more detail.
If using the `overrides` key of the theme as documented
[here](/customization/themes/#customizing-all-instances-of-a-component-type),
you need to use the following style sheet name: `MuiSelect`.
## Inheritance
The properties of the [Input](/api/input/) component are also available.
You can take advantage of this behavior to [target nested components](/guides/api/#spread).
## Demos
- [Selects](/demos/selects/)