Customize MUI Autocomplete with getOptionLabel, renderInput, and renderOption

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.

View Code Sandbox here!

Docs:

https://material-ui.com/components/autocomplete/