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 }}
/>
);
}