How to Style the Material-UI Autocomplete Component

The Material-UI Autocomplete component and its Popper component can be styled by targeting built-in MUI styling APIs. The Popper is also called a dropdown or listbox. The difference is that Popper is the positioning element while Listbox is the visible list element. That’s why MUI Autocomplete has a prop for customizing the Popper (PopperComponent) and … Read more

How to Set Multiple Values Programmatically in the MUI Autocomplete Component

It’s helpful at times to be able to programmatically set values in a component. Often this can be accomplished in a simple manner with useState. For Autocomplete, it was a bit more complicated and difficult to find. After finally getting it working, I realized there was actually an example straight from the docs of programmatically … Read more

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 … Read more