Skip to content
Edit this page

Select

Select components are used for collecting user provided information from a list of options.

Basic select

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

​
<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

Advanced features

The Select component is meant to be interchangeable with a native <select> element.

If you are looking for more advanced features, like combobox, multiselect, autocomplete, async or creatable support, head to the Autocomplete component. It's meant to be an improved version of the "react-select" and "downshift" packages.

Props

Filled and outlined variants

​
​

Labels and helper text

​

With label + helper text

None

Without label

Auto width

​

Other props

​

Disabled

​

Error

​

Read only

​

Required

Native select

As the user experience can be improved on mobile using the native select of the platform, we allow such pattern.

<FormControl fullWidth>
  <InputLabel htmlFor="uncontrolled-native">Age</InputLabel>
  <NativeSelect
    defaultValue={30}
    inputProps={{
      name: 'age',
      id: 'uncontrolled-native',
    }}
  >
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </NativeSelect>
</FormControl>

TextField

The TextField wrapper component is a complete form control including a label, input and help text. You can find an example with the select mode in this section.

Customized selects

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

The first step is to style the InputBase component. Once it's styled, you can either use it directly as a text field or provide it to the select input prop to have a select field.

​

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Multiple select

The Select component can handle multiple selections. It's enabled with the multiple prop.

Like with the single selection, you can pull out the new value by accessing event.target.value in the onChange callback. It's always an array.

Default

​

Checkmarks

​

Chip

​

Placeholder

Placeholder

Native

Controlled open select

​

With a dialog

While it's discouraged by the Material Design specification, you can use a select inside a dialog.

Grouping

Display categories with the ListSubheader component or the native <optgroup> element.

​

Accessibility

To properly label your Select input you need an extra element with an id that contains a label. That id needs to match the labelId of the Select e.g.

<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</Select>

Alternatively a TextField with an id and label creates the proper markup and ids for you:

<TextField id="select" label="Age" value="20" select>
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</TextField>

For a native select, you should mention a label by giving the value of the id attribute of the select element to the InputLabel's htmlFor attribute:

<InputLabel htmlFor="select">Age</InputLabel>
<NativeSelect id="select">
  <option value="10">Ten</option>
  <option value="20">Twenty</option>
</NativeSelect>

API