materialuiupgraded

Version:

Material-UI's workspace package

76 lines (55 loc) • 6.42 kB

Markdown

--- 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/)