How to hide clear button of Autocomplete in React Material UI

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

• How to change Typography color in React Material UI

• How to add a custom font in React Material UI

• How to make React Material UI Typography bold

• How to get React material ui theme object in function components

• How to use Material UI icons in React Material UI