[form controls] Fix visually hidden input styles

[atomiks]

• I have followed (at least) the PR section of the contributing guide.

The visuallyHidden util isn't suitable for hidden inputs in form controls because native validation popups won't point to them (since the hidden input is at the top-left of the screen currently). They instead should be positioned where the control is.

Affects:

• NumberField
• Radio
• Checkbox
• Switch
• Select
• Combobox

Slider already handled this correctly

---

The main issue when not adding top/left is stray overflow (since the visually hidden input takes up layout size) however this should not be a concern for form inputs specifically

[pkg-pr-new]

• vite-css-base-ui-example

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

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

commit: f19a024

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	▼-13B(0.00%)	🔺+14B(+0.01%)

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	f19a024
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/694b71121621940008f54a45
😎 Deploy Preview	https://deploy-preview-3606--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.

[mnajdova]

Example of fixed component (RadioGroup): https://stackblitz.com/edit/nrb7shnu?file=src%2FApp.tsx

Broken on master: https://stackblitz.com/edit/ub6e7bxf?file=src%2FApp.tsx

I noticed that the number field was already working, I am not sure why, e.g. check: https://stackblitz.com/edit/snm2yjeu?file=package.json, but in general using the new visually hidden styles for inputs makes sense.

[mnajdova]

Good catch for removing the useMemo 👍

[atomiks]

@mnajdova ah it's because NumberField adds the required form validation prop on the visible input <NumberField.Input> as well. But, min/max/step validation popups wouldn't point correctly, since the visible input isn't type="number" and the validation props are only on the hidden input in that case.

[mnajdova]

@mnajdova ah it's because NumberField adds the required form validation prop on the visible input <NumberField.Input> as well. But, min/max/step validation popups wouldn't point correctly, since the visible input isn't type="number" and the validation props are only on the hidden input in that case.

Ah ok, makes sense 👌