How to hide clear button of Autocomplete in React Material UI

Last updated on Oct 11, 2022 by Suraj Sharma



In this tutorial, you will learn how to hide the clear button of Mui Autocomplete


Consider We have implemented a simple Mui <Autocomplete /> component


  import React from 'react';
  import TextField from '@mui/material/TextField';
  import Autocomplete from '@mui/material/Autocomplete';

  const options = [
    { label: 'JavaScript', value: 'js'},
    { label: 'Python', value: 'py'},
    { label: 'Java', value: 'java'},
    { label: 'Golang', value: 'go'},
  ]
  export function App(props) {
    return (
      <div className='App'>
        <Autocomplete
          autoHighlight
          options={options}
          getOptionLabel={option => option.label}
          renderOption={option => <>{option.label}</>}
          value={value}
          renderInput={params => (
            <TextField
              variant="outlined"
              {...params}
              InputProps={{
                ...params.InputProps,
              }}
              InputLabelProps={{
                shrink: false,
                focused: false,
              }}
            />
          )}
        />
      </div>
    );
  }


To hide the clear button on the right of the input field we will use the disableClearable property of the Autocomplete



Set disableClearable to true


Setting the disableClearable property to true hides the clear button from the text field of Material UI Autocomplete.


  <Autocomplete
    autoHighlight
    options={options}
    getOptionLabel={option => option.label}
    renderOption={option => <>{option.label}</>}
    value={value}
    renderInput={params => (
      <TextField
        variant="outlined"
        {...params}
        InputProps={{
          ...params.InputProps,
        }}
        InputLabelProps={{
          shrink: false,
          focused: false,
        }}
      />
      disableClearable={true} // hides the clear button 
    )}
  />


Related Solutions


Rate this post


Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.