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

Issue

I'm using Material-UI for a project and I'm going through their API.

However, I don't understand the notched property in the OutlineInput Component

<FormControl variant='outlined'>
  <OutlinedInput notched={false} />
</FormControl>

Switching the notched property from false to true doesn't change anything visually.

Also, as I'm not a native English speaker, I quite don't understand what it is supposed to do.

Solution

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

Answered By - Ryan Cogswell