Many React Material-UI components have incredible customizations out-of-the-box, while some are functional but missing nice-to-have options (I’m looking at you, Table-without-a-search-prop).
The Autocomplete component may have the most customization options of any MUI component I’ve seen. Chips, grouping, disabled options, multiselect, custom popup items, fixed options, and more are demoed in the docs.

Link to full JavaScript code is in the Resources section.
***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx
prop. If you are using MUI v5, simply insert the styling code directly into the sx
prop instead of using makeStyles
and classes. I am working on updating my articles, but until I’m finished, read my guide to the MUI sx prop to learn more.
Here’s a YouTube version of this post, or watch it below:
Fetching Remote Data with MUI Autocomplete
Unfortunately, I found that custom styling the Popper and using the renderOption prop were challenging despite the existing examples. Therefore, I created this demo that fetches data from a Star Wars API and populates this custom styled Autocomplete component:

Fetching the data required two hooks: useEffect
and useState
.
const [data, setData] = useState([]); useEffect(() => { fetch("https://swapi-deno.azurewebsites.net/api/starships") .then((response) => response.json()) .then((data) => setData(data)); });
The data is stored in the data
state constant and passed as the options
prop to the Autocomplete component.
(swapi-deno is a small site that sometimes has downtime…in my Code Sandbox I have the fetch code but also a reduced version of the data locally)
MUI Autocomplete getOptionLabel, renderInput, and renderOption Explained
Below is my code for my customized Autocomplete component. I will explain the three most important (and cryptic) props:
- getOptionLabel
- renderInput
- renderOption
<Autocomplete id="custom-autocomplete" options={data} style={{ width: 350, margin: 20 }} getOptionLabel={(option) => `${option.name}: ${option.manufacturer}`} //filter value ListboxProps={{ sx: root }} renderInput={(params) => { return ( <TextField {...params} variant="outlined" label="Name: Manufacturer" sx={textfield} /> ); }} //MUI v4 only passed (option) renderOption={(props, option, state) => { return ( <h4 key={`${option.name}: ${option.manufacturer}`} >{`${option.name}: ${option.manufacturer}`}</h4> ); //display value }} />
getOptionLabel
provides the syntax for searching. As it is in my demo, users can search based either on name or manufacturer. However, if I had limited it to getOptionLabel={(option) => (option.name)}
then Autocomplete search would only work on name.
renderInput
provides the component for users to input search criteria or view selected criteria. This is commonly a TextField
component. Even with other customizations such as tags or chips, a TextField
is still commonly used here. If you are using a TextField as the renderInput, these two articles will show you how to set Material-UI Autocomplete border and background color.
If you get “renderInput is not a function” error, try wrapping your prop value in an arrow function. renderInput
requires a function so that parameters can be passed to the custom component you pass as the Input component.
renderOption
controls how the text is rendered in each row of the dropdown (i.e. each Popper <li>
element). This prop is not required, however, it provides for significant customization. For example, I changed the elements within each <li>
to <h4>
. renderOption
will default to getOptionLabel
when it is not otherwise configured.
The renderOption prop was updated in MUI v5 and now requires a function with three params: props
, option
, and state
.
The renderOption prop will customize the dropdown list items. Read here how to customize the dropdown Popper.
Resources
My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.
Expand your JavaScript knowledge with these 50 difficult JavaScript questions!
Here’s how to set multiple values programmatically in the Autocomplete component.
Here’s how to set default values in MUI Autocomplete.
Here’s how to Use and Remove the MUI Autocomplete Clear Button
The Select component is not too different than the Autocomplete. Read a tutorial on the Select component here.
Docs:
Nice Work ,God bless you !
I’m glad the autocomplete component example helped!
Good job with the article Jon. I am trying to keep the autocomplete drop down open after the first choice is picked. Any ideas ? Thanks
https://mui.com/api/autocomplete/
You need to use the property: disableCloseOnSelect
Thanks for above solution.
But what if I need to search on both manufacturer and name , but in dropdown only name should be visible ?
Is it achievable ?