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.
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 Select inputProps
Notice in the code above 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. Like the TextField, this is directly to the input element in the DOM.
However, the TextField and the Select treat their input elements in a different way. This is interesting to me because I can see that the Select uses an Input component as its root (see the class named MuiInputBase-root
at the root of the Select in the DOM). However, the input
element in the DOM seems to be treated as a native input.

The Select inputProps
styles the text of the selected choice when it displays in the input area:

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.
Hi, can you please add multiple autocomplete explanations? I am facing some difficulties with its CSS and cannot able to figure it out. Please note that the options and value are coming from another component.
Hi Hewali, I have several MUI Autocomplete posts that might help. Start with this one on Autocomplete styling and also read some of the additional posts linked in that one.