[radio group] Does not match form data of native radio when submitted with no checked items

[mirka]

Bug report

Current behavior

When a Radio is integrated into a form and is submitted without any items checked, the resulting form data for that name key is an empty string. This differs from a native radio group, where the form data would be null.

Expected behavior

The form data for that key would be null, matching the native behavior.

(cf. Checkbox, which does return null for the key when submitted unchecked, matching the native checkbox behavior.)

Reproducible example

CodeSandbox

Base UI version

1.0.0-beta.2

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

[mj12albert]

@mirka Makes sense for us to use null for this as well ~ are you interested in opening a PR?

[ingokpp]

I took a look at the code to understand this issue better as I'm interested in making my first contribution to the project. 👋🏻

After taking a look at the code, I think this issue could be tricky to fix. Achieving native-like behavior (returning null instead of "") could be done by conditionally rendering the input component only when there is a value. However, this would break other parts since we always need at least a hidden element for validation.

Another solution could be to conditionally render the name attribute (when selected) rather than the entire input, but this would mean that we need to update all other tests which expect that the input always has a name attribute. The existing tests like expect(stringifiedFormData).to.equal('group=') are testing the bug, not the
correct behavior. They were written to match the "incorrect" implementation rather than native HTML standards.

Since I'm not that deep into the project yet, I'm wondering: would conditionally rendering the name attribute be an acceptable change for the tests, or are there other considerations I should be aware of when it comes to how the hidden input's name property is used throughout the codebase?

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@2473