What the notched property is supposed to do in Material-UI

The notched property only has a visible effect in combination with the labelWidth property. When notched is true, it leaves a gap in the outline where the label is placed when the label's shrink property is true. Generally there is no need to use the notched, labelWidth, or shrink properties explicitly. If you use TextField (instead of the lower-level OutlinedInput) all of these details are handled automatically.

Here's an example demonstrating this:

import React from "react";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div>
      <OutlinedInput notched={false} labelWidth={100} />
      <br />
      <br />
      <OutlinedInput notched={true} labelWidth={100} />
      <br />
      <br />
      <TextField variant="outlined" label="The Label" value="The Value" />
      <br />
      <br />
      <TextField
        variant="outlined"
        InputProps={{ notched: false }}
        label="The Label"
        value="The Value"
      />
    </div>
  );
}

Ryan's Answer is very good. However it is slightly different in the current version of v5 docs. The labelWidth prop is no longer supported. As of now there are two steps involved in the notch process.

The workflow that requires a notched prop is little bit contrived, as it would mean that there will be a notch or whitespace at the top of your input box, no matter what the situation is. Nevertheless, if that is your requirement, you need to specify both notched={true}(or simply notched), as well as label="Whatever your label text is". The component will provide a notch that is the width of the text you provided in the label prop.

<OutlinedInput notched={true} id="test" label="HI" />

If you do not explicitly mention notched, the behaviour is that the notch will be visible when the input is focused. It will not persist when you click away, regardless of whether there is text content in the input box.

A more common workflow involves actually providing a label for the input component. This is something you would do when making your own custom components from MUI components. Here you do not need to specify the notched prop, as the default behaviour will do the trick. However you do need to specify a separate InputLabel component, and wrap both in a FormControl, for the notch to be occupied by the required label.

<FormControl>
  <InputLabel>Label Text</InputLabel>
  <OutlinedInput label="Label Text" />
</FormControl>

The label will work with the code above. However it is recommended to provide a for and id attribute to help with screen readers.

<FormControl>
  <InputLabel htmlFor="test" id="testlabel">
    Label Text
  </InputLabel>
  <OutlinedInput id="test" label="Label Text" />
</FormControl>