Selects

Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element.

Simple Select

To show this type of Selects you will need this code in down here.

     
<FormControl className="w-100 mb-2">
    <InputLabel htmlFor="age-simple">Age</InputLabel>
    <Select
            value={this.state.age}
            onChange={this.handleChange('age')}
            input={<Input id="age-simple" /> }
        autoWidth >
        <MenuItem value="">
            <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
     </Select>
     <FormHelperText>Auto width</FormHelperText>
</FormControl>
  

Available parameters, type and descriptions are down below.

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		Useful to extend the style applied to components.
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	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		Properties applied to the input element. When native is true, the properties are applied on the select element.
MenuProps	object		Properties applied to the 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. Useful 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. Useful 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 |  arrayOf		The input value. This property is required when the native property is false (default).