How to Clear MUI TextField and Input (And Add Clear Button)

In this tutorial we will create an easy way for a user to clear a Material-UI TextField. We’ll then use similar code for clearing the Input. The TextField component is composed of a Material-UI Input plus other components, so they behave similarly.

I’ll first show how to clear the TextField with an external button press. Then I’ll demo how to add a clear button inside the TextField using the EndAdornment prop. The button will have focus styling just like the Autocomplete’s clear button.

Next I’ll show example code for adding a clear button to the Input component.

Here’s a YouTube video version of this post or watch below:

Two Ways to Clear the MUI TextField and Input

There are two methods for clearing the MUI TextField:

• Setting a state value in the value prop and clearing it
• Clearing the inputRef value

The Input component can be cleared in the same ways as the TextField.

Clear State Value

To control and clear the TextField with a state value, we create a state value with React.useState. Next, set this value as the TextField’s value prop and make sure the onChange handler updates this value.

Finally, clear this value on Button click:

import { useState } from "react";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";

import Button from "@mui/material/Button";


export default function ClearTextField() {
  const [value, setValue] = useState("Original Val");

  return (
    <Stack>
      <TextField
        onChange={(newValue) => {
          setValue(newValue.target.value);
        }}
        variant="outlined"
        defaultValue={value}
        value={value}
        sx={{
          m: 2
        }}
      />
      <Button
        variant="outlined"
        onClick={() => {
          setValue('');
        }}
      >
        Clear TextField Contents
      </Button>
    </Stack>
  );
}

I have TypeScript enabled but no type declarations are required because all values above are inferred.

Make sure that you set the value prop to empty string. If you set it to null, the TextField will not clear.

Clear inputRef

If you don’t want to maintain state, then consider clearing the input ref. We can access this value through the inputRef prop.

The total amount of code is similar. Create the ref, pass it to inputRef, and clear the ref’s current.value on Button click. Notice the TypeScript typing of the useRef hook.

const inputRef = useRef<HTMLInputElement>(null);

//JSX
<Input
  inputRef={inputRef}
  sx={{
    m: 2
  }}
/>
<Button
  variant="outlined"
  onClick={() => {
    if (inputRef.current) {
      inputRef.current.value = "";
    }
  }}
>
  Clear Input
</Button>

Add a Clear Button to MUI TextField

Instead of resetting the TextField value on click of an external Button, we will add a clear button inside the TextField (like the screenshot at the beginning of the post showed).

I used InputProps.endAdornment to pass an IconButton to the TextField. This will be visible on the right side of the text input area.

const [value, setValue] = useState("Original Val");
const handleClearClick = () => {
  setValue("");
};

//JSX
<TextField
  onChange={(newValue) => {
    setValue(newValue.target.value);
  }}
  variant="outlined"
  defaultValue={value}
  value={value}
  InputProps={{
    endAdornment: (
<IconButton
  sx={{ visibility: value ? "visible" : "hidden" }}
  onClick={handleClearClick}
>
  <ClearIcon />
</IconButton>
    ),
  }}
  sx={{
    m: 2,
    "& .Mui-focused .MuiIconButton-root": { color: "primary.main" },
  }}
/>

I added two important stylings to the IconButton and ClearIcon. First is that I made it hidden when there is no value to clear. I originally tried not rendering the Button (this is what Autocomplete does), but the TextField size was jumping around. The difference between TextField and Autocomplete is that the icon is rendered in a slightly different place in the DOM tree, so there can be some resizing when it suddenly isn’t rendered.

The other styling I added was on the TextField, but it was a nested selector that targeted the IconButton. This selector adds primary.main color when the TextField input area has focus.

Add a Clear Button to MUI Input

If you want to add a Clear Button to the Input component, I recommend using state instead of inputRef to manage the Input value. A state value allows you to hide the Clear Button when the Input has no value.

Notice the difference in the nested selector for targeting the clear button compared to the selector in the TextField. The Input component is simpler and has less composition, so the first part of the selector has no space (‘ ‘) between the & and .Mui-focused.

<Input
  onChange={(newValue) => {
    setValue(newValue.target.value);
  }}
  defaultValue={value}
  value={value}
  endAdornment={<IconButton sx={{visibility: value? "visible": "hidden"}} onClick={handleClearClick}><ClearIcon/></IconButton>}
  sx={{ m: 2, "&.Mui-focused .MuiIconButton-root": {color: 'primary.main'} }}
/>

Otherwise, this example is similar. It uses endAdornment and passes in an IconButton that will render on the right side of the user input area.

Adding a clear button to the Select component is almost the same as the TextField.

Resources

MUI TextField Docs

MUI Input Docs

If you use Bootstrap, here’s how to add a clear button (or icon) to a Bootstrap Input component.