Why is the value of a checkbox using useCheckbox '' instead of 'on'?

[snowystinger]

Discussed in #3516

^{Originally posted by brandonpittman September 14, 2022}
Ran into this today and was wondering why is the value of a checkbox using useCheckbox '' instead of 'on'?

I'm not passing it a value, but it's getting assigned to an empty string.

A checkbox's default behavior when it doesn't have an explicit value is to send 'on' when submitted in a form.

From MDN:

If the value attribute was omitted, the default value for the checkbox is on, so the submitted data in that case would be subscribe=on

Also, this example you shared creates a checkbox with a value attribute that has no value.

• https://codesandbox.io/s/vigilant-keldysh-0cp8ry?file=/src/App.js

The useCheckbox examples in the docs also present with this problem.

• https://react-spectrum.adobe.com/react-aria/useCheckbox.html#example

So the server pulls '' out of the FormData. The expected behavior is <input type="checkbox" > shouldn't have a value attribute in the DOM.

In the following example, you'll see that useCheckbox applies an empty value attribute. The default checkbox doesn't have that. When this usually occurs is when you apply value={null || undefined}—which I now believe useToggle is doing here.

• https://codesandbox.io/s/affectionate-sea-je2biu?file=/src/App.js

We don't come up with a value for you because that usually needs to be a string that matches something on your server should you want to submit a form. So it's empty until you supply one. The value doesn't matter if you are submitting the data via js because you'd store the data in some js object.

If you expect the browser's default behavior and submit a form normally, this is a problem.

[sonithch]

Hi, I would like to contribute here. Can I start working on this?

[snowystinger]

Thanks for volunteering, go for it!

[sonithch]

@snowystinger I did confirm the issue is caused by the value=undefined returned by the useToggle

The idea is to return the value attribute from the useToggle if it's only passed via props to it, else do not return it.

So, instead of value, return the expression ...(Object.prototype.hasOwnProperty.call(props, 'value') && {value}) in useToggle which checks the if the value is passed in props and then returns it. This makes sure the checkbox value is on if the value is not passed.

Let me know if this is the right way to go.

[brandonpittman]

...(Object.prototype.hasOwnProperty.call(props, 'value') && {value})

I was kinda thinking it would have to be something like this.

[sonithch]

yeah, I'm not sure if there is a better way of doing it.

[snowystinger]

Hey! Thanks for starting to look into it, this is such a strange bug. Undefined should be omitted from the dom. With your observations, I found both that the React Team doesn't intend to fix this, and that MUI also works around this.
facebook/react#17590
mui/material-ui#28423

I think we can do it for all of useToggle, we don't need to special case it to checkboxes. I see this affects our React Spectrum Switch component as well https://react-spectrum.adobe.com/react-spectrum/Switch.html

[sonithch]

@snowystinger Hi, thanks for the references.

Passing null in the value attribute logs a warning in the console by default. So, we omit only the undefined value in useToggle in the same way as MUI even if it's passed intentionally?

Something like this
...(value !== undefined && {value})

Let me know if this is the right way, so that I can raise a PR for the changes in useToggle.

[brandonpittman]

Since I originally reported this, I went ahead and created a PR that fixes it over here.