[material-ui][Radio] "No label associated with a form field" when using FormLabel with RadioGroup

[peter1357908]

Steps to reproduce

Link to live example: https://mui.com/material-ui/react-radio-button/

Current behavior

Chrome and Edge both complain in the "Issues" tab of page inspection "No label associated with a form field". Even the official demos in the above link result in these complaints.

Expected behavior

There shouldn't be any complaint.

To resolve this issue, I tried specifying "htmlFor" (as a FormLabel prop) and "id" (as a RadioGroup prop). Chrome then tells me Incorrect use of <label for=FORM_ELEMENT> (see screenshot)

Context

I want to remove the warning, as well as learn how to properly use the FormLabel component.

How does FormLabel work? How do I specify which component the label is for?

Your environment

System:
OS: Windows 11 10.0.22621
Binaries:
Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (121.0.2277.83)
npmPackages:
@mui/envinfo: ^2.0.16 => 2.0.16

Search keywords: FormLabel, RadioGroup, missing label

[samuelsycamore]

Thanks for opening this @peter1357908 ! It looks like we could improve the Radio Group demos by adding all of the necessary attributes to each of them.

[Kimzify]

Can I work on this issue?

[yordanov0502]

Has the issue been resolved yet ? And what is the worst that can happen other than accumulating infinite browser messages for "possible improvements" / "warnings" ?

[samuelsycamore]

@Kimzify please go ahead! 😁