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

Discussed in https://github.com/adobe/react-spectrum/discussions/3516

<div type='discussions-op-text'>

^{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.

</div>

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]

@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.

[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.