The Autocomplete component is useful for giving the user limited options to select from. When a choice is selected it populates an Input subcomponent. Autocomplete has a ‘clear’ button for removing the selected choice.
In this post we will:
- Add a custom clear event handler
- Style the clear button
- Remove the clear button

The clear button is only visible on hover of the Input (by default).
Full code for this tutorial is in the Resources section.
Here’s a YouTube video version of this post or watch below:
MUI Autocomplete Clear Button Event
In MUI, most events are available for custom handling through the component API. However, the Autocomplete API does not directly have a clear event or onClear
prop (There is a solution, keep reading).
Here’s the TypeScript error I get when I try to add onClear
:

The solution: when the clear button is clicked, the onChange
handler is fired. We can use this handler for any custom handling of the clear event.
const handleChange = (event: React.SyntheticEvent<Element, Event>, value: trailData | null) => {
console.log(value)
}
<Autocomplete onChange={handleChange} />
In the above code, I log the new value onChange
. Notice my TypeScript typing of the value prop.
Style MUI Autocomplete Clear Button
I decided the “cancel” button in the TextField Input (it only shows on hover) should also be styled blue. In the same class I added the following:
tfStyle: {
"& .MuiButtonBase-root.MuiAutocomplete-clearIndicator": {
color: "blue",
visibility: "visible"
}
}
Notice how even the indicator has a specific class applied by Material-UI since it is inside the Autocomplete.
Also, you can swap the tooltip text that appears on hover with the clearText
prop.
MUI Autocomplete Clear Icon
You can replace the clear icon with a custom icon by using the clearIcon
prop.
Here’s example code:
<Autocomplete clearIcon={<HighlightOffIcon/>} />
Notice that the clearIcon
prop requires a value of type node
.

Remove MUI Autocomplete Clear Button
The ‘Clear’ Button can be removed by using the disableClearable
prop:
<Autocomplete disableClearable />
With this prop enabled, the clear button is no longer rendered as part of the Autocomplete Input’s endAdornment
element.
You might want to disable the clear button if you enable the clearOnEscape
prop. This will clear a value that was selected while the Autocomplete is in a focus state. It will not clear a value that was previously selected.
Adding a clear button to the Select component is more challenging.
Resources
You can use MUI’s ClickAwayListener to create your own Autocomplete.
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import HighlightOffIcon from "@mui/icons-material/HighlightOff";
interface trailData {
name: string;
state: string;
}
const tfStyle = {
"& .MuiButtonBase-root.MuiAutocomplete-clearIndicator": {
color: "blue",
visibility: "visible",
},
};
const handleChange = (
event: React.SyntheticEvent<Element, Event>,
value: trailData | null
) => {
console.log(value);
};
export default function ClearAutocomplete() {
return (
<Autocomplete
onChange={handleChange}
options={myTrails}
//disableClearable
//clearOnEscape
//clearIcon={<HighlightOffIcon/>}
id="autocomplete-1"
getOptionLabel={(option) => `${option.name}: ${option.state}`}
renderInput={(params) => {
return (
<TextField
{...params}
variant="outlined"
label="Name: State"
sx={tfStyle}
/>
);
}}
sx={{ mb: 2, minWidth: 400 }}
/>
);
}
const myTrails = [
{
name: "Eagle Mountain Lake",
state: "Texas",
},
{
name: "Inks Lake Woodland Trail",
state: "Texas",
},
{
name: "Tanyard Creek Loop",
state: "Arkansas",
},
{
name: "Turner Falls Park",
state: "Oklahoma",
},
];