Material-UI TextField variant label striking through value

November 24, 2021

I am trying to use TextField component from Material-UI with the outlined variant, but for some reason the label goes straight through the value? How can I fix this?

Screenshot of TextField with label and value mixed up

I reproduced it in below codesandbox.io:

https://codesandbox.io/s/angry-borg-2ojel?file=/src/App.tsx

App.tsx

import { TextField } from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <TextField variant="outlined" label="Label" value="Vest" />
    </div>
  );
}

package.json

    "@material-ui/core": "4.12.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3"

>Solution :

Add InputLabelProps={{ shrink: true }} to force the "shrink" state of a TextField control, which in this case should render the label on the outline of the field.

import { TextField } from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <TextField variant="outlined" label="Label" value="Vest" InputLabelProps={{ shrink: true }}/>
    </div>
  );
}