The Ultimate Guide to MUI Dropdown Components (3 Examples!)

The Material UI Dropdown component is not actually a specific component. Instead, there are three choices of component you can use as a “Dropdown”:

• Autocomplete
• Select
• TextField

A basic “dropdown” version of each of these components look identical but have significantly different APIs. The Autocomplete and Select have a Popper menu by default, but the TextField must be configured to include one.

In this tutorial we will create these simple Dropdown components but will deeply compare and contrast the API:

MUI Autocomplete Dropdown

The Autocomplete dropdown is quite different from the Select and TextField dropdowns. Its API is unique and the dropdown menu renders using different classes. The links in this section are to more complex Autocomplete component examples.

In the image below, I captured the Popper root in the DOM. Notice it uses Popper class, while later we will see that Select and TextField use the Popover and Modal classes.

The Autocomplete requires two or three props, depending on the data in the dropdown. Here’s the code from my example:

<Autocomplete
  options={trails}
  getOptionLabel={(option) => `${option.name}, ${option.state}`} // Required if the options are objects
  renderInput={(params) => {
    return (
      <TextField {...params}/>
    );
  }}

/>

The options prop accepts the array that will be rendered in the dropdown. In my example, the trails array has two fields: name and state. The getOptionsLabel prop controls how the data is rendered on each line of the dropdown Popper. The renderInput prop controls how the data renders in the Input area when an item is selected.

These props are all non-existent in Select and TextField. They actually render the dropdown options by having them passed as children (example code in the next section).

Finally, I performed a simple styling comparison of the three Dropdown components. I styled the text in the Input area primary.main blue from the default palette:

Initially I attempted to add an sx prop with color: "primary.main" to the renderInput TextField’s InputProps like this:

renderInput={(params) => {
  return (
    <TextField {...params} InputProps={{ sx: { color: "primary.main" } }}/>
  );
}}

This is similar to how the Select and TextField can be styled. However, this removed the arrow icon in the Input, probably because it somehow wiped out the endAdornment prop value in the TextField.

I instead styled the AutoComplete using its root sx prop and a nested selector:

sx={{ "& .MuiInputBase-root": { color: "primary.main" } }}

I believe there is a bug in the MUI Autocomplete, because InputProps should have been an acceptable styling method.

The default styling of all three dropdown components is identical.

MUI Select Dropdown

The MUI Select dropdown has simpler props than the Autocomplete. Here’s the code from my example:

<Select inputProps={{sx: { color: "primary.main" }}}>
  {trails.map((trail) => {
    return (
      <MenuItem
        value={trail.name}
      >{`${trail.name}, ${trail.state}`}</MenuItem>
    );
  })}
</Select>

Instead of using props for rendering the data, Select requires a child component. In this case, I looped through the data and rendered both fields of each object inside a MenuItem.

Notice how I added the primary.main color to the Select using inputProps. At first glance this seems like TextField’s InputProps except the capitalization is wrong. However, this is passing props directly to the input element in the DOM. This is interesting to me because I can see that the Select does use an Input component (see the class named MuiInputBase-root at the root of the Select in the DOM).

The DOM rendering of the Select dropdown Popover uses different classes but has the same look as the Autocomplete. Be aware of this if you want to use nested selectors to style the dropdown.

MUI TextField Dropdown

The TextField and Select Dropdowns are very similar. Their dropdowns render the same in the DOM. They both have access to TextField variants.

There are three primary difference between a Select and a TextField used as a dropdown:

• The TextField is wrapped in a FormControl component at the root level
• The TextField needs to be passed select: true in order to render as a Select dropdown
• TextField uses InputProps instead of inputProps (discussed above)

The second point is trivial, but the first is important. FormControl manages state of interior components. It also affects the behavior of labels when TextField and Select use variant: "outlined". Wrap the Select in a FormControl to get the nice notched outline effect that the TextField has.