[Select] Provide a Placeholder component

[awhitty]

Feature request

Overview

I'm working on migrating parts of a project from react-aria to Radix. Structurally, not every select menu in my project can have a defaultValue -- it would be overreaching in the application to provide a default selection for some form fields. In #1231, it's somewhat clear that the Radix Select primitive doesn't have first-class support for an unselected state -- a value or a defaultValue has to be supplied in order the menu to line up with its trigger.

I imagine something like a Placeholder component could support this case well in a Radix-y fashion. Placeholder would conditionally render its children when value and defaultValue are null | undefined (or perhaps when value and defaultValue have no corresponding Item (?)).

Usage could look like

<Select.Root value={null}>
  <Select.Trigger>
    <Select.Value /> {/* Not rendered? */}
    <Select.Placeholder>
      Select an option {/* Rendered! */}
    </Select.Placeholder>
    <Select.Icon />
  </Select.Trigger>

  {/* ... */}
</Select.Root>

Examples in other libraries

@react-aria/select

<span {...valueProps}>
  {state.selectedItem
    ? state.selectedItem.rendered
    : 'Select an option'}
</span>

react-select (docs in-page links are broken but search "placeholder")

<Select
  // ...
  placeholder="Select an option"
/>

Who does this impact? Who is this for?

Everybody using the Radix Select primitive.

Additional context

I recognize that the native <select> element doesn't support empty values and folks have to provide some sort of default selection and disable the option as shown in answers to this SO post. I don't think this is a very savory solution (and judging by spotty browser behaviors in the comments on that post, I don't think other folks do either). I think it's likely a reason folks reach for a JS library for select menus in the first place, so I think Radix could embrace that here.

Thank you by the way! Loving this library so far.

[acc-nicholas]

I was just coming to report this as an issue/request as well! Thanks for the write up!

[benoitgrelard]

Thanks for the suggestion, we'll look into it.