diff --git a/docs/src/pages/demos/selects/ControlledOpenSelect.tsx b/docs/src/pages/demos/selects/ControlledOpenSelect.tsx
new file mode 100644
index 00000000000000..a12be90ce117af
--- /dev/null
+++ b/docs/src/pages/demos/selects/ControlledOpenSelect.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  button: {
+    display: 'block',
+    marginTop: theme.spacing(2),
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+}));
+
+function ControlledOpenSelect() {
+  const classes = useStyles();
+  const [age, setAge] = React.useState<string | number>('');
+  const [open, setOpen] = React.useState(false);
+
+  function handleChange(event: React.ChangeEvent<{ value: unknown }>) {
+    setAge(event.target.value as number);
+  }
+
+  function handleClose() {
+    setOpen(false);
+  }
+
+  function handleOpen() {
+    setOpen(true);
+  }
+
+  return (
+    <form autoComplete="off">
+      <Button className={classes.button} onClick={handleOpen}>
+        Open the select
+      </Button>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
+        <Select
+          open={open}
+          onClose={handleClose}
+          onOpen={handleOpen}
+          value={age}
+          onChange={handleChange}
+          inputProps={{
+            name: 'age',
+            id: 'demo-controlled-open-select',
+          }}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </form>
+  );
+}
+
+export default ControlledOpenSelect;
diff --git a/docs/src/pages/demos/selects/CustomizedSelects.tsx b/docs/src/pages/demos/selects/CustomizedSelects.tsx
new file mode 100644
index 00000000000000..487332ccb5c387
--- /dev/null
+++ b/docs/src/pages/demos/selects/CustomizedSelects.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { makeStyles, withStyles } from '@material-ui/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import InputBase from '@material-ui/core/InputBase';
+import { Theme } from '@material-ui/core/styles';
+
+const BootstrapInput = withStyles((theme: Theme) => ({
+  root: {
+    'label + &': {
+      marginTop: theme.spacing(3),
+    },
+  },
+  input: {
+    borderRadius: 4,
+    position: 'relative',
+    backgroundColor: theme.palette.background.paper,
+    border: '1px solid #ced4da',
+    fontSize: 16,
+    width: 'auto',
+    padding: '10px 26px 10px 12px',
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    // Use the system font instead of the default Roboto font.
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    '&:focus': {
+      borderRadius: 4,
+      borderColor: '#80bdff',
+      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+    },
+  },
+}))(InputBase);
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  margin: {
+    margin: theme.spacing(1),
+  },
+  bootstrapFormLabel: {
+    fontSize: 18,
+  },
+}));
+
+function CustomizedSelects() {
+  const classes = useStyles();
+  const [age, setAge] = React.useState('');
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setAge(event.target.value as string);
+  };
+  return (
+    <form className={classes.root} autoComplete="off">
+      <FormControl className={classes.margin}>
+        <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
+          Age
+        </InputLabel>
+        <BootstrapInput />
+      </FormControl>
+      <FormControl className={classes.margin}>
+        <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
+          Age
+        </InputLabel>
+        <Select
+          value={age}
+          onChange={handleChange}
+          input={<BootstrapInput name="age" id="age-customized-select" />}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+      <FormControl className={classes.margin}>
+        <InputLabel htmlFor="age-customized-native-simple" className={classes.bootstrapFormLabel}>
+          Age
+        </InputLabel>
+        <NativeSelect
+          value={age}
+          onChange={handleChange}
+          input={<BootstrapInput name="age" id="age-customized-native-simple" />}
+        >
+          <option value="" />
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </NativeSelect>
+      </FormControl>
+    </form>
+  );
+}
+
+export default CustomizedSelects;
diff --git a/docs/src/pages/demos/selects/DialogSelect.tsx b/docs/src/pages/demos/selects/DialogSelect.tsx
new file mode 100644
index 00000000000000..cf1e2160d25358
--- /dev/null
+++ b/docs/src/pages/demos/selects/DialogSelect.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import InputLabel from '@material-ui/core/InputLabel';
+import Input from '@material-ui/core/Input';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+}));
+
+function DialogSelect() {
+  const classes = useStyles();
+  const [state, setState] = React.useState({
+    open: false,
+    age: '',
+  });
+
+  const handleChange = (name: keyof typeof state) => (
+    event: React.ChangeEvent<{ value: unknown }>,
+  ) => {
+    setState({ ...state, [name]: Number(event.target.value) });
+  };
+
+  function handleClickOpen() {
+    setState({ ...state, open: true });
+  }
+
+  function handleClose() {
+    setState({ ...state, open: false });
+  }
+
+  return (
+    <div>
+      <Button onClick={handleClickOpen}>Open select dialog</Button>
+      <Dialog disableBackdropClick disableEscapeKeyDown open={state.open} onClose={handleClose}>
+        <DialogTitle>Fill the form</DialogTitle>
+        <DialogContent>
+          <form className={classes.container}>
+            <FormControl className={classes.formControl}>
+              <InputLabel htmlFor="age-native-simple">Age</InputLabel>
+              <Select
+                native
+                value={state.age}
+                onChange={handleChange('age')}
+                input={<Input id="age-native-simple" />}
+              >
+                <option value="" />
+                <option value={10}>Ten</option>
+                <option value={20}>Twenty</option>
+                <option value={30}>Thirty</option>
+              </Select>
+            </FormControl>
+            <FormControl className={classes.formControl}>
+              <InputLabel htmlFor="age-simple">Age</InputLabel>
+              <Select
+                value={state.age}
+                onChange={handleChange('age')}
+                input={<Input id="age-simple" />}
+              >
+                <MenuItem value="">
+                  <em>None</em>
+                </MenuItem>
+                <MenuItem value={10}>Ten</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </form>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={handleClose} color="primary">
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}
+
+export default DialogSelect;
diff --git a/docs/src/pages/demos/selects/MultipleSelect.tsx b/docs/src/pages/demos/selects/MultipleSelect.tsx
new file mode 100644
index 00000000000000..fc221faf3e8a23
--- /dev/null
+++ b/docs/src/pages/demos/selects/MultipleSelect.tsx
@@ -0,0 +1,197 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, useTheme, Theme } from '@material-ui/core/styles';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import ListItemText from '@material-ui/core/ListItemText';
+import Select from '@material-ui/core/Select';
+import Checkbox from '@material-ui/core/Checkbox';
+import Chip from '@material-ui/core/Chip';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+    maxWidth: 300,
+  },
+  chips: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  chip: {
+    margin: 2,
+  },
+  noLabel: {
+    marginTop: theme.spacing(3),
+  },
+}));
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+const names = [
+  'Oliver Hansen',
+  'Van Henry',
+  'April Tucker',
+  'Ralph Hubbard',
+  'Omar Alexander',
+  'Carlos Abbott',
+  'Miriam Wagner',
+  'Bradley Wilkerson',
+  'Virginia Andrews',
+  'Kelly Snyder',
+];
+
+function getStyles(name: string, personName: string[], theme: Theme) {
+  return {
+    fontWeight:
+      personName.indexOf(name) === -1
+        ? theme.typography.fontWeightRegular
+        : theme.typography.fontWeightMedium,
+  };
+}
+
+function MultipleSelect() {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [personName, setPersonName] = React.useState<string[]>([]);
+
+  function handleChange(event: React.ChangeEvent<{ value: unknown }>) {
+    setPersonName(event.target.value as string[]);
+  }
+
+  function handleChangeMultiple(event: React.ChangeEvent<{ value: unknown }>) {
+    const { options } = event.target as HTMLSelectElement;
+    const value: string[] = [];
+    for (let i = 0, l = options.length; i < l; i += 1) {
+      if (options[i].selected) {
+        value.push(options[i].value);
+      }
+    }
+    setPersonName(value);
+  }
+
+  return (
+    <div className={classes.root}>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="select-multiple">Name</InputLabel>
+        <Select
+          multiple
+          value={personName}
+          onChange={handleChange}
+          input={<Input id="select-multiple" />}
+          MenuProps={MenuProps}
+        >
+          {names.map(name => (
+            <MenuItem key={name} value={name} style={getStyles(name, personName, theme)}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="select-multiple-checkbox">Tag</InputLabel>
+        <Select
+          multiple
+          value={personName}
+          onChange={handleChange}
+          input={<Input id="select-multiple-checkbox" />}
+          renderValue={selected => (selected as string[]).join(', ')}
+          MenuProps={MenuProps}
+        >
+          {names.map(name => (
+            <MenuItem key={name} value={name}>
+              <Checkbox checked={personName.indexOf(name) > -1} />
+              <ListItemText primary={name} />
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="select-multiple-chip">Chip</InputLabel>
+        <Select
+          multiple
+          value={personName}
+          onChange={handleChange}
+          input={<Input id="select-multiple-chip" />}
+          renderValue={selected => (
+            <div className={classes.chips}>
+              {(selected as string[]).map(value => (
+                <Chip key={value} label={value} className={classes.chip} />
+              ))}
+            </div>
+          )}
+          MenuProps={MenuProps}
+        >
+          {names.map(name => (
+            <MenuItem key={name} value={name} style={getStyles(name, personName, theme)}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl className={clsx(classes.formControl, classes.noLabel)}>
+        <Select
+          multiple
+          displayEmpty
+          value={personName}
+          onChange={handleChange}
+          input={<Input id="select-multiple-placeholder" />}
+          renderValue={selected => {
+            if ((selected as string[]).length === 0) {
+              return <em>Placeholder</em>;
+            }
+
+            return (selected as string[]).join(', ');
+          }}
+          MenuProps={MenuProps}
+        >
+          <MenuItem disabled value="">
+            <em>Placeholder</em>
+          </MenuItem>
+          {names.map(name => (
+            <MenuItem key={name} value={name} style={getStyles(name, personName, theme)}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel shrink htmlFor="select-multiple-native">
+          Native
+        </InputLabel>
+        <Select
+          multiple
+          native
+          value={personName}
+          onChange={handleChangeMultiple}
+          inputProps={{
+            id: 'select-multiple-native',
+          }}
+        >
+          {names.map(name => (
+            <option key={name} value={name}>
+              {name}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
+export default MultipleSelect;
diff --git a/docs/src/pages/demos/selects/NativeSelects.tsx b/docs/src/pages/demos/selects/NativeSelects.tsx
new file mode 100644
index 00000000000000..dffcec0eda62e5
--- /dev/null
+++ b/docs/src/pages/demos/selects/NativeSelects.tsx
@@ -0,0 +1,228 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Input from '@material-ui/core/Input';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import FilledInput from '@material-ui/core/FilledInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import NativeSelect from '@material-ui/core/NativeSelect';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+function NativeSelects() {
+  const classes = useStyles();
+  const [state, setState] = React.useState<{ age: string | number; name: string }>({
+    age: '',
+    name: 'hai',
+  });
+
+  const inputLabel = React.useRef<HTMLLabelElement>(null);
+  const [labelWidth, setLabelWidth] = React.useState(0);
+  React.useEffect(() => {
+    setLabelWidth(inputLabel.current!.offsetWidth);
+  }, []);
+
+  const handleChange = (name: keyof typeof state) => (
+    event: React.ChangeEvent<{ value: unknown }>,
+  ) => {
+    setState({
+      ...state,
+      [name]: event.target.value,
+    });
+  };
+
+  return (
+    <div className={classes.root}>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="age-native-simple">Age</InputLabel>
+        <Select
+          native
+          value={state.age}
+          onChange={handleChange('age')}
+          inputProps={{
+            name: 'age',
+            id: 'age-native-simple',
+          }}
+        >
+          <option value="" />
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="age-native-helper">Age</InputLabel>
+        <NativeSelect
+          value={state.age}
+          onChange={handleChange('age')}
+          input={<Input name="age" id="age-native-helper" />}
+        >
+          <option value="" />
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </NativeSelect>
+        <FormHelperText>Some important helper text</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <NativeSelect
+          value={state.age}
+          onChange={handleChange('age')}
+          name="age"
+          className={classes.selectEmpty}
+        >
+          <option value="">None</option>
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </NativeSelect>
+        <FormHelperText>Without label</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel shrink htmlFor="age-native-label-placeholder">
+          Age
+        </InputLabel>
+        <NativeSelect
+          value={state.age}
+          onChange={handleChange('age')}
+          input={<Input name="age" id="age-native-label-placeholder" />}
+        >
+          <option value="">None</option>
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </NativeSelect>
+        <FormHelperText>Label + placeholder</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl} disabled>
+        <InputLabel htmlFor="name-native-disabled">Name</InputLabel>
+        <NativeSelect
+          value={state.name}
+          onChange={handleChange('name')}
+          input={<Input name="name" id="name-native-disabled" />}
+        >
+          <option value="" />
+          <optgroup label="Author">
+            <option value="hai">Hai</option>
+          </optgroup>
+          <optgroup label="Contributors">
+            <option value="olivier">Olivier</option>
+            <option value="kevin">Kevin</option>
+          </optgroup>
+        </NativeSelect>
+        <FormHelperText>Disabled</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl} error>
+        <InputLabel htmlFor="name-native-error">Name</InputLabel>
+        <NativeSelect
+          value={state.name}
+          onChange={handleChange('name')}
+          name="name"
+          input={<Input id="name-native-error" />}
+        >
+          <option value="" />
+          <optgroup label="Author">
+            <option value="hai">Hai</option>
+          </optgroup>
+          <optgroup label="Contributors">
+            <option value="olivier">Olivier</option>
+            <option value="kevin">Kevin</option>
+          </optgroup>
+        </NativeSelect>
+        <FormHelperText>Error</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="uncontrolled-native">Name</InputLabel>
+        <NativeSelect defaultValue={30} input={<Input name="name" id="uncontrolled-native" />}>
+          <option value="" />
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </NativeSelect>
+        <FormHelperText>Uncontrolled</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <NativeSelect
+          className={classes.selectEmpty}
+          value={state.age}
+          name="age"
+          onChange={handleChange('age')}
+        >
+          <option value="" disabled>
+            Placeholder
+          </option>
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </NativeSelect>
+        <FormHelperText>Placeholder</FormHelperText>
+      </FormControl>
+      <FormControl required className={classes.formControl}>
+        <InputLabel htmlFor="age-native-required">Age</InputLabel>
+        <Select
+          native
+          value={state.age}
+          onChange={handleChange('age')}
+          name="age"
+          inputProps={{
+            id: 'age-native-required',
+          }}
+        >
+          <option value="" />
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </Select>
+        <FormHelperText>Required</FormHelperText>
+      </FormControl>
+      <FormControl variant="outlined" className={classes.formControl}>
+        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
+          Age
+        </InputLabel>
+        <Select
+          native
+          value={state.age}
+          onChange={handleChange('age')}
+          input={
+            <OutlinedInput name="age" labelWidth={labelWidth} id="outlined-age-native-simple" />
+          }
+        >
+          <option value="" />
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </Select>
+      </FormControl>
+      <FormControl variant="filled" className={classes.formControl}>
+        <InputLabel htmlFor="filled-age-native-simple">Age</InputLabel>
+        <Select
+          native
+          value={state.age}
+          onChange={handleChange('age')}
+          input={<FilledInput name="age" id="filled-age-native-simple" />}
+        >
+          <option value="" />
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
+export default NativeSelects;
diff --git a/docs/src/pages/demos/selects/SimpleSelect.tsx b/docs/src/pages/demos/selects/SimpleSelect.tsx
new file mode 100644
index 00000000000000..724bf8ea76b9de
--- /dev/null
+++ b/docs/src/pages/demos/selects/SimpleSelect.tsx
@@ -0,0 +1,260 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Input from '@material-ui/core/Input';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import FilledInput from '@material-ui/core/FilledInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+function SimpleSelect() {
+  const classes = useStyles();
+  const [values, setValues] = React.useState({
+    age: '',
+    name: 'hai',
+  });
+
+  const inputLabel = React.useRef<HTMLLabelElement>(null);
+  const [labelWidth, setLabelWidth] = React.useState(0);
+  React.useEffect(() => {
+    setLabelWidth(inputLabel.current!.offsetWidth);
+  }, []);
+
+  function handleChange(event: React.ChangeEvent<{ name?: string; value: unknown }>) {
+    setValues(oldValues => ({
+      ...oldValues,
+      [event.target.name as string]: event.target.value,
+    }));
+  }
+
+  return (
+    <form className={classes.root} autoComplete="off">
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="age-simple">Age</InputLabel>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          inputProps={{
+            name: 'age',
+            id: 'age-simple',
+          }}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="age-helper">Age</InputLabel>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          input={<Input name="age" id="age-helper" />}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Some important helper text</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          displayEmpty
+          name="age"
+          className={classes.selectEmpty}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Without label</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel shrink htmlFor="age-label-placeholder">
+          Age
+        </InputLabel>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          input={<Input name="age" id="age-label-placeholder" />}
+          displayEmpty
+          name="age"
+          className={classes.selectEmpty}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Label + placeholder</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl} disabled>
+        <InputLabel htmlFor="name-disabled">Name</InputLabel>
+        <Select
+          value={values.name}
+          onChange={handleChange}
+          input={<Input name="name" id="name-disabled" />}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value="hai">Hai</MenuItem>
+          <MenuItem value="olivier">Olivier</MenuItem>
+          <MenuItem value="kevin">Kevin</MenuItem>
+        </Select>
+        <FormHelperText>Disabled</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl} error>
+        <InputLabel htmlFor="name-error">Name</InputLabel>
+        <Select
+          value={values.name}
+          onChange={handleChange}
+          name="name"
+          renderValue={value => `⚠️  - ${value}`}
+          input={<Input id="name-error" />}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value="hai">Hai</MenuItem>
+          <MenuItem value="olivier">Olivier</MenuItem>
+          <MenuItem value="kevin">Kevin</MenuItem>
+        </Select>
+        <FormHelperText>Error</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="name-readonly">Name</InputLabel>
+        <Select
+          value={values.name}
+          onChange={handleChange}
+          input={<Input name="name" id="name-readonly" readOnly />}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value="hai">Hai</MenuItem>
+          <MenuItem value="olivier">Olivier</MenuItem>
+          <MenuItem value="kevin">Kevin</MenuItem>
+        </Select>
+        <FormHelperText>Read only</FormHelperText>
+      </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="age-auto-width">Age</InputLabel>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          input={<Input name="age" id="age-auto-width" />}
+          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>
+      <FormControl className={classes.formControl}>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          name="age"
+          displayEmpty
+          className={classes.selectEmpty}
+        >
+          <MenuItem value="" disabled>
+            Placeholder
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Placeholder</FormHelperText>
+      </FormControl>
+      <FormControl required className={classes.formControl}>
+        <InputLabel htmlFor="age-required">Age</InputLabel>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          name="age"
+          inputProps={{
+            id: 'age-required',
+          }}
+          className={classes.selectEmpty}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        <FormHelperText>Required</FormHelperText>
+      </FormControl>
+      <FormControl variant="outlined" className={classes.formControl}>
+        <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
+          Age
+        </InputLabel>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          input={<OutlinedInput labelWidth={labelWidth} name="age" id="outlined-age-simple" />}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+      <FormControl variant="filled" className={classes.formControl}>
+        <InputLabel htmlFor="filled-age-simple">Age</InputLabel>
+        <Select
+          value={values.age}
+          onChange={handleChange}
+          input={<FilledInput name="age" id="filled-age-simple" />}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </form>
+  );
+}
+
+export default SimpleSelect;