[material-ui][Select] Simplify placeholders, consistent sizing, and styling #49517

Summary

I've been using MUI extensively in a production React application, and I find the developer experience around Select incredibly frustrating.

Something as basic as creating a dropdown with a placeholder, consistent height, and standard form behavior requires far more code and CSS overrides than it should.

These aren't unusual requirements. They're things developers need constantly.

1. Why doesn't Select support a placeholder?

TextField supports a simple placeholder prop, but Select doesn't.

Instead, developers must use displayEmpty, renderValue, and custom placeholder markup:

<Select
  displayEmpty
  renderValue={value =>
    options.find(o => o.id === value)?.name ||
    <span style={{ color: '#999' }}>Select an option</span>
  }
>
  {options.map(o => (
    <MenuItem key={o.id} value={o.id}>
      {o.name}
    </MenuItem>
  ))}
</Select>

Why can't we simply write:

<Select placeholder='Select an option'>

This should be basic functionality.

2. TextField with select behaves differently from a regular TextField

I tried switching to:

<TextField select />

But discovered that it internally uses Select, meaning it still requires Select-specific styling and behavior.

Even worse, passing displayEmpty and renderValue directly to TextField produces React warnings because those props belong to the underlying Select component.

Developers must understand the internal component structure just to configure a dropdown.

3. Inconsistent heights and excessive CSS overrides

Getting TextField and Select to have identical heights has been surprisingly difficult.

I tried adjusting:

'.MuiOutlinedInput-root'
'.MuiInputBase-input'
'.MuiOutlinedInput-input'
'.MuiSelect-select'

Setting an explicit height on the outer input can cause the browser's autofill background to overflow its container.

Setting the same height on the inputs doesn't necessarily produce identical results because Select has additional padding and minimum-height rules.

Why should developers need to understand and override multiple internal CSS classes just to make two form controls the same height?

There should be a straightforward, consistent sizing API.

4. Unnecessarily complicated form integration

Integrating Select with React Hook Form also requires additional consideration.

Unlike a standard input, using register() directly with MUI Select can lead to controlled/uncontrolled warnings and unexpected behavior.

The recommended solution is generally to use Controller, adding another layer of code for something as ordinary as a dropdown.

I understand that MUI Select is a custom component, but that shouldn't make basic form integration so cumbersome.

5. Too much complexity for simple functionality

My broader frustration is that MUI frequently requires developers to understand its internal component hierarchy, slots, CSS classes, and special props to accomplish basic UI tasks.

I appreciate that MUI is a comprehensive component library, but the abstraction should make development easier, not force developers to spend hours fighting styling differences.

Suggested improvements

Add native placeholder support to Select.

Make TextField and Select sizing consistent by default.

Provide a simple, reliable way to control input height without internal CSS overrides.

Simplify Select configuration when using TextField select.

Improve integration with common form libraries such as React Hook Form.

Reduce the need to target internal MUI classes for routine styling.

I recognize that newer MUI versions have introduced API improvements, but these fundamental usability concerns deserve attention.

The bottom line: A UI component library should make building forms easier. Creating a dropdown with a placeholder and matching height should take minutes, not hours of debugging.

I'd genuinely like to keep using MUI, but the amount of boilerplate and CSS troubleshooting involved in basic form controls is making me seriously consider switching libraries.

Examples

No response

Motivation

No response

Search keywords: Select placeholder, TextField select, input height, CSS styling, React Hook Form