reactjstypescriptmaterial-ui

My MUI Select component doesn't display placeholder or label props

Basically what the title says. I'm trying to use the Select component in my app but both the placeholder="Text" and label={"Text"} props don't display the expected result.

When using placeholder the Select is rendered as "empty", while the label prop looks like is doing something but after clicking on it this is the result:

select component with empty label

My package.json shows

"@material-ui/core": "^5.0.0-alpha.27",
"@material-ui/icons": "^5.0.0-alpha.27",
"@material-ui/lab": "^5.0.0-alpha.27",
"@material-ui/system": "^5.0.0-alpha.27",

<Select
  label={"Text"}
  variant="outlined"
  size="small"
  fullWidth
>
  <MenuItem value={1}>Option 1</MenuItem>
  <MenuItem value={2}>Option 2</MenuItem>
</Select>
Solution

  • Material UI doesn't support placeholder for <Select /> directly, cause it's also the label: See: here

    Instead you will use <InputLabel>Text</InputLabel>

    Something like this:

    <FormControl>
    <InputLabel>Text</InputLabel>
    <Select variant="outlined" size="small" fullWidth>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
    </Select>
</FormControl>