[docs][select] Remove placeholders

[aarongarciah]

Select placeholders don't add value and are not required in the vast majority of use cases. This PR removes all placeholders from Select demos so we don't promote its usage.

• In single selection demos, options with null value have been removed and a defaultValue has been added instead.
• In the multiple selection demo, the placeholder has been removed altogether because it already had a defaultValue.

Updated demos:

• Select
  • Hero
  • Multiple selection
  • Formatting the value (code snippet)
• Forms (handbook)
  • Hero
  • React Hook Form
  • TanStack Form
• Animation (handbook)

Note: Ideally all Selects should have a proper label, but I assume we don't want to add noise when showcasing individual components demos.

[pkg-pr-new]

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3580
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3580
  

commit: 107f534

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	107f534
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/694439084b2a260008d36a3d
😎 Deploy Preview	https://deploy-preview-3580--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[atomiks]

Select placeholders don't add value and are not required in the vast majority of use cases.

Two arguments for "placeholders" when there's an empty state (e.g. country select which can't have a default value, unlike the font example)

1. Empty state recognition

In a long form, users often scan for empty fields to see what is left to fill in. If a select already has a value filled in (the default option), it might look finished. A placeholder with a muted text color (like gray) clearly signals "This field is incomplete"

2. Consistent interaction model

Text inputs typically start empty with a placeholder, but select inputs that start pre-filled break this consistency, forcing the user to process two different types of "unfilled" states

---

I agree that in a typical web app UI, all selects are prefilled with some value, but in a traditional "form", selects start off empty.

For example, how would you model a "Select country" select widget without a placeholder? Which btw the Combobox has as a demo, and would need updating here too.

I would say at the very least, we need some kind of section documenting placeholders and recommended guidelines for them.

---

Ideally all Selects should have a proper label, but I assume we don't want to add noise when showcasing individual components demos.

We should update the demos to use them because the demos contradict the recommendation in Usage guidelines and every other demo has a <label> as well

[aarongarciah]

The idea is to not promote placeholders from the get go. The thing is, when a Select is properly labelled, there aren't many use cases for placeholders.

1. Empty state recognition
   In a long form, users often scan for empty fields to see what is left to fill in. If a select already has a value filled in (the default option), it might look finished. A placeholder with a muted text color (like gray) clearly signals "This field is incomplete"

Yeah, I see this pretty often. But again, if the Select is properly labelled, what value is the placeholder adding if the user is picking from a set of predefined values? Isn't an empty Select equally signaling "This field is incomplete"?

2. Consistent interaction model
   Text inputs typically start empty with a placeholder, but select inputs that start pre-filled break this consistency, forcing the user to process two different types of "unfilled" states

But a Select can start empty, right? No need for it to be prefilled. It's true that sometimes seeing placeholders in all inputs (text, select, etc.) it's visually appealing, and in rare cases they can help. For example, the month and year placeholders in this screenshot from shadcn helps know the format you need to type if you're using typeahead:

I agree that in a typical web app UI, all selects are prefilled with some value, but in a traditional "form", selects start off empty.

I didn't mean all Selects should be prefilled. The only reason to prefill the demos in this PR was because there's no labels. They could be empty initially.

For example, how would you model a "Select country" select widget without a placeholder? Which btw the Combobox has as a demo, and would need updating here too.

If that demo had a label (as it should), what would be the added value of a placeholder? If the intention is to be able to "empty" the value, shouldn't a specific option be added? e.g. "None", instead of using the placeholder as label? If the field was required, the "None" option could be obviated, of course.

I would say at the very least, we need some kind of section documenting placeholders and recommended guidelines for them.

A section on how to deal with placeholders would be nice e.g. recommending not using placeholders as a substitute for labels, etc.

I'm pretty sure users will keep using placeholders, and there are valid use cases, but maybe not using them in all demos helps set a better tone.

We should update the demos to use them because the demos contradict the recommendation in Usage guidelines and every other demo has a as well

👍

[atomiks]

Yeah, I see this pretty often. But again, if the Select is properly labelled, what value is the placeholder adding if the user is picking from a set of predefined values? Isn't an empty Select equally signaling "This field is incomplete"?

Colm had a thread about this - an empty button with no label looks weird when it's not an input (at least imo 😅). I haven't seen that anywhere on the web and it looks confusing. I think all buttons need to have something inside of them, regardless if they're labeled explicitly or not. https://x.com/colmtuite/status/1942903716602102018

I'm pretty sure users will keep using placeholders, and there are valid use cases, but maybe not using them in all demos helps set a better tone.

The main issue is a null placeholder item may not be obvious how to use. A user might wonder "how do I have a placeholder item initially", as it may not be clear the default value of Select is null. They might also want to omit the item from the select list, but this breaks clearing expectations (a user cannot go back to null value if the item isn't in the list), so showing how to do it on the docs offers more guidance.

[atomiks]

This will be replaced by #3604