Mui - Outlined Select Label Is Not Rendering Properly

MUI - Outlined select label is not rendering properly

Solution 1: Use TextField

This is what TextField is for. It uses FormControl and InputLabel internally and make sure they work well together. You can tell TextField to render select instead input by overriding the select props:

<TextField
  value={value}
  onChange={(e) => setValue(e.target.value)}
  select // tell TextField to render select
  label="Label"
>
  <MenuItem key={1} value="test">
    Test 1
  </MenuItem>
  <MenuItem key={2} value="test2">
    Test 2
  </MenuItem>
</TextField>

For more detail about how TextField works, see this answer.

Solution 2: Use Select

If you decide to use Select, you need to write more code to do the same amount of work:

Pass the label text as InputLabel children

<InputLabel id="test-select-label">Label</InputLabel>

This label text will be rendered on the screen as the Select label when put inside FormControl and next to the Select component.

Pass the label text to the label props of the Select component

This label text is hidden and used to override and remove the part of the border-top where the real label is occupied when the Select label is shrinked.

<Select labelId="test-select-label" label="Label">

Putting it together we'll have something like below, note that with this approach we need to set the label in 2 different places which is not very DRY, so I'd prefer the first approach.

<FormControl>
  <InputLabel id="test-select-label">Label</InputLabel>
  <Select
    value={value}
    onChange={(e) => setValue(e.target.value)}
    labelId="test-select-label"
    label="Label"
  >
    <MenuItem key={1} value="test">
      Test 1
    </MenuItem>
    <MenuItem key={2} value="test2">
      Test 2
    </MenuItem>
  </Select>
</FormControl>

Live Demo

Label gets misaligned when size of MUI select is set to small

I decided to replace the Select with a TextField element with an attribute select. I also got rid of the InputLabel and the related attribute of labelId. It looks great now.

<FormControl fullWidth>
  <TextField
    select
    id="key"
    value={key}
    label="Key"
    onChange={handleChange}
    required
    size="small"
  >
    <MenuItem value={"A"}>A</MenuItem>
    <MenuItem value={"B"}>B</MenuItem>
    <MenuItem value={"C"}>C</MenuItem>
  </TextField>
</FormControl>

MUI Select, top border doesn't show

                <mui.InputLabel id="course-name-label">
                  {t('common:subjectCourseName', {
                    subject:
                      values.category === 'SOCIAL_STUDIES'
                        ? 'Social Studies'
                        : values.category.toLowerCase().charAt(0).toUpperCase() +
                          values.category.toLowerCase().slice(1),
                  })}
                </mui.InputLabel>
                <mui.OutlinedInput
                  name="name"
                  value={values.name ?? ''}
                  onChange={handleChange}
                  label={t('common:subjectCourseName', {
                    subject:
                      values.category === 'SOCIAL_STUDIES'
                        ? 'Social Studies'
                        : values.category.toLowerCase().charAt(0).toUpperCase() +
                          values.category.toLowerCase().slice(1),
                  })}
                ></mui.OutlinedInput>
              </mui.FormControl>

export const categoryOptions = [
  { id: 'MATH', name: 'Math' },
  { id: 'ENGLISH', name: 'English' },
  { id: 'SCIENCE', name: 'Science' },
  { id: 'SOCIAL_STUDIES', name: 'Social Studies' },
  { id: 'ELECTIVES', name: 'Electives' },
];

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

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>

---

Related Topics