The Ultimate Guide to MUI TextField onChange with TypeScript

The MUI TextField onChange event is the most common event used on the TextField (per my research). In this tutorial we will explore the TypeScript typing for the event and learn how to pass in an extra prop.

Full code for this tutorial is in the Resources section.

How to Use MUI TextField onChange with TypeScript

The Material UI TextField is a complex component that is composed of several subcomponents. It renders as a composition of several divs, a label, an input, and more. This input element is important for understanding the TypeScript typing of the onChange event.

The event passed to the onChange event is of type React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>. If we call a separate function to handle the change event, we need to pass the event in with this typing:

export default function ChangeTextField() {
  const handleTextFieldChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    console.log(event.target.value);
  }

  return (

      <TextField
        onChange={handleTextFieldChange}
      />
  );

}

The onChange prop can be used to get and set values on the MUI TextField.

Remember that if you ever need help with the strict typing of a function, hover over the function and your IDE will show you the function definition:

It’s also important to know that event.target may have some useful properties on it like the height and width of the input.

How to Pass Extra Props to MUI TextField

If we want to pass additional props to the TextField’s onChange handler, we simply define the extra parameters in the handler function:

const handleTextFieldChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, extra: string) => {
  if (event.target.value === 'a') {
    console.log(extra);
  }
  console.log(event.target.value);
}

Now I can pass in the additional value in the onChange prop:

<TextField
      onChange={(event) => handleTextFieldChange(event, 'extra prop')}
/>

Now when I type ‘abc’, I log the following to the console:

Notice that event.target.value is the entire value of the TextField, not just the most recently entered character.

Here’s how to add a clear button to the TextField if you want to wipe out the value.

Resources

Here is full react code this TextField onChange example:

import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";

export default function ChangeTextField() {
  const handleTextFieldChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, extra: string) => {
    if (event.target.value === 'a') {
      console.log(extra);
    }
    console.log(event.target.value);
  }

  return (

      <TextField
        //onChange={handleTextFieldChange}
        onChange={(event) => handleTextFieldChange(event, 'extra prop')}
        id="filled-1"
        label="handle the change"
        variant="outlined"
        sx={{ mb: 2 }}
      />

  );
}