CODEWITHSUNDEEP
reactjsmaterial-ui
Andrei
Andrei

Reputation: 11

MUI Select label not hiding properly

I have a MUI Select which I want to hide the label, but it's not working:

    <FormControl fullWidth>
      <Select
        value={selectedEntry}
        onChange={(e) => handleSelectEntry(e.target.value)}
        inputProps={{ 'aria-label': 'Without label' }}
      >
        {dropDownList?.map((entry) => (
          <MenuItem key={entry.key} value={entry.key}>{entry.value}</MenuItem>
        ))}
      </Select>
    </FormControl>

It display this: output 1

Upvotes: 1

Views: 3945

Answers (1)

v1s10n_4
v1s10n_4

Reputation: 707

You can set the displayEmpty prop of Select, if true, a value is displayed even if no items are selected. In order to display a meaningful value, a function can be passed to the renderValue prop which returns the value to be displayed when no items are selected. But you can don't provide any renderValue and no "label" (actually its more like a default displayed value) will be shown.

Empty select:

<Select
  value={selectedEntry}
  displayEmpty
  onChange={(e) => handleSelectEntry(e.target.value)}
>

Select with default displayed value:

<Select
  value={selectedEntry}
  displayEmpty
  onChange={(e) => handleSelectEntry(e.target.value)}
  renderValue={value => value || 'there\'s nothing selected'}
>

Upvotes: 2

Related Questions