title: How to make select label always appear at top in MUI?
body: <p>I want to create a material ui selector that label always appear at top. I added placeholder to select component. Here is what I want to do.</p>
  <p><a href="https://i.stack.imgur.com/tFMzD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tFMzD.png" alt="enter image description here" /></a></p>
  <p>When not focusing to select component or at the beginning, it looks like this.Label overlaps the place holder.</p>
  <p><a href="https://i.stack.imgur.com/EZxw0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EZxw0.png" alt="enter image description here" /></a></p>
  <p>What I want to create select label always seem at the top and not overlaps the placeholder.</p>
  <p>Here is the code at codesandbox</p>
  <p><a href="https://codesandbox.io/s/multipleselectplaceholder-material-demo-forked-s0zww?file=/demo.js" rel="nofollow noreferrer">CodeSandbox</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as React from "react";
  import MenuItem from "@mui/material/MenuItem";
  import FormControl from "@mui/material/FormControl";
  import Select from "@mui/material/Select";
  import InputLabel from "@mui/material/InputLabel";
  
  const names = ["Oliver Hansen", "Van Henry", "April Tucker", "Ralph Hubbard"];
  
  export default function MultipleSelectPlaceholder() {
    const [personName, setPersonName] = React.useState(null);
  
    const handleChange = (event) =&gt; {
      setPersonName(event.target.value);
    };
  
    return (
      &lt;div&gt;
        &lt;FormControl sx={{ m: 1, width: 300, mt: 3 }}&gt;
          &lt;InputLabel id="demo-simple-select-label"&gt;Age&lt;/InputLabel&gt;
          &lt;Select
            labelId="demo-simple-select-label"
            label="Age"
            displayEmpty
            value={personName}
            onChange={handleChange}
            renderValue={(selected) =&gt; {
              if (selected === null) {
                return &lt;em&gt;Please Choose Name&lt;/em&gt;;
              }
  
              return selected;
            }}
          &gt;
            &lt;MenuItem value={null}&gt;
              &lt;em&gt;Clear&lt;/em&gt;
            &lt;/MenuItem&gt;
            {names.map((name) =&gt; (
              &lt;MenuItem key={name} value={name}&gt;
                {name}
              &lt;/MenuItem&gt;
            ))}
          &lt;/Select&gt;
        &lt;/FormControl&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>