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

[brandonpittman]

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.

[snowystinger]

I'm not sure I follow. If you're not passing a value, why would it get 'on'?
https://codesandbox.io/s/vigilant-keldysh-0cp8ry?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.

[brandonpittman]

@snowystinger Thanks for responding!

I'm not sure I follow. If you're not passing a value, why would it get 'on'?

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.

[snowystinger]

Ah, thank you for all the extra information. Seems like something we should consider. I'll convert this to an issue.