Sl-checkbox does not submit with form, whether checked or unchecked

[LazyDevStudio]

Describe the bug

Sl-checkbox and also sl-switch do not submit with their form, whether checked or unchecked. They are not part of the FormData object either. Submitting both traditionally and via fetch API does not work.

To Reproduce

• Create form, add an sl-checkbox, an sl-input, and sl-button of type "submit". Set the form fields as "required".
• Fill in the input, check the checkbox.
• Try to submit the form either traditionally or with fetch + FormData in JS.
• Examine the request with dev tools. It only includes the sl-input field data but not the checkbox.

Browser / OS

FF 100.0 on Windows 10

[claviska]

I believe this is a duplicate of #732 and has been fixed in next and will be available in the next release. You can verify this by seeing if it works in beta.72, as it is known to be broken in 73.

If this isn't a dup, feel free to comment and I'll reopen!

[Antony92]

Can confirm that checkboxes are not submitting their value even in beta.72

Here is an example Codepen

[LazyDevStudio]

I tested down to beta.52 and the bug already occurred back then.

[trailsnail]

Hi togehter,

don't you think that the value attribute is required?
If you add value="1" it works as expected.

I never saw a checkbox in a form without a value attribute - so this seems not to be a bug for me.

Other thoughts?

Was wondering - then none of our applications would have worked correctly for months. 🤣

[claviska]

I've verified that this is fixed in next. The updated behavior for <sl-checkbox> and <sl-radio> is that both will yield on when a name is provided without a value. When no name is provided, nothing is appended to the FormData object. This is consistent with native controls.

[karolskolasinski]

@claviska still doesn't work:

{userState?.installations.map((installation, index) => (
    <sl-checkbox
      name={`i-${index}-${installation?.machineId}`}
      value="xxxxxxxxxxxxxxxxxx"
   >
     {installation.name}
   </sl-checkbox>
))}

can you check? I get in the body:

{ "i-0-578484d8e14bda1c": "true", "i-1-578484d8e14bda1c": "true" } 

no value here, only true

[claviska]

@karolskolasinski We have tests to verify that form submission is working as intended, and no other reports of this.

For submission to work, checkboxes must be checked and they must have a name. If value is omitted, it will default to on like <input type="checkbox">. If a value is provided, that value will be used instead.

https://codepen.io/claviska/pen/WNPzbEa?editors=1010

From what I can tell, everything is working as expected. The code above doesn't have enough information to determine if a problem exists in the library, so it could be something else causing unexpected results in your app.

[karolskolasinski]

@claviska There is a problem in deno (Hono framework) using the htmx library. When I use:

   <sl-radio-group name="param">
       {params.map((param) => <sl-radio value={param.param}>{param.param}</sl-radio>)}
</sl-radio-group>

everything works fine, but if I use sl-checkbox I don't get the correct value and the value is not 'on' but 'true'.