I created an example of setting state values in a MUI TextField and updating the value when the TextField is changed. This is a method of setting a default value but it has more use than the default prop in the MUI TextField.

Notice the component underneath the TextField in the screenshot above. It is observing the same state value as the TextField and so its value changes on TextField change.
Full React code for this tutorial is in the Resources section.
Related posts:
- How to Change MUI TextField’s Border Color
- How to Set Default Values in MUI Autocomplete
- How to Set Multiple Values in MUI Autocomplete
- The Ultimate MUI Select Component Tutorial
- Add a Clear Button to the MUI TextField and Input Components
- How to Add a Clear Button to the MUI Select Component
See a video version of this post on YouTube or watch below:
MUI TextField Set Value
The TextField component has a prop called value
that is intended for externally setting and using the current TextField value.
Here’s the simplest code for setting the TextField value externally:
const [tfValue, setTFValue] = useState("My Text");
//JSX
<TextField value={tfValue} />
This starts the TextField with the value “My Text” on render.
If tfValue
is externally updated, then the value of the TextField component will also update. I created a Button that concats a “1” to tfValue
onClick and also displays tfValue
.

The code for this is in the Resources section.
MUI TextField Get Value
Use the onChange handler to get the current value from an MUI TextField. In this example I update a state value every time TextField value changes.
<TextField
onChange={(newValue) => setTFValue(newValue.target.value)} />
This is the same state value that is passed to the TextField value
prop in the Set Value example.
MUI TextField Default Value
The MUI TextField can display a default value on render by using the defaultValue
prop.
This is useful if you don’t need to externally get or set the TextField value, or if you are using a form. A form will automatically extract a TextField child components value on submit of the form.
Here’s example code:
<TextField defaultValue={"Some Value"} />
You’ll notice that in the full demo code that I commented out the defaultValue
prop. That’s because I directly pass a value to the value
prop that can be updated by the Button component. If I didn’t need this functionality, I would use the simpler solution of the defaultValue
prop.
Resources
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 ValueTextField() {
const [tfValue, setTFValue] = useState("Original Val");
return (
<Stack>
<TextField
onChange={(newValue) => setTFValue(newValue.target.value)}
id="filled-1"
label="Dynamic"
variant="outlined"
//defaultValue={"Def"}
value={tfValue}
sx={{mb:2}}
/>
<Button variant="outlined" onClick={()=>{setTFValue(tfValue+'1')}}>{tfValue}</Button>
</Stack>
);
}
We can also get, set, and use default values in React-Bootstrap’s Form Control component.