Submit false value from 'off' toggle

[davidmcguiredesign]

The switch toggle component currently behaves like a checkbox when a form is submitted: it submits its value if toggled on, and submits nothing when it is toggled off. But to me, checkboxes and toggles have slightly different UX meanings. To me, a toggle implies a boolean is present (but might be false), but a checkbox indicates whether a value is present (and it might not be).

Implementing a select-like or radio-like behavior would be trivial, and would simplify a very common lightweight backend form validation requirement.

I can understand if people disagree with my semantic differentiation of checkboxes and switches. In that case, an optional property could be added for both switches and checkboxes that modifies the behavior. For instance, an unchecked property could set the value submitted while toggled off, like unchecked="0" or unchecked="off".

[claviska]

I understand where you're coming from and I agree that it's strange how checkboxes work in general. They only submit if checked and, if no value is provided, they submit the string "on" when checked. We followed this pattern for checkboxes for obvious reasons. While switches are semantically different, we followed it for consistency and to prevent unexpected values from being submitted.

For example, if you're writing checkbox logic on the backend, a key's existence is currently an indicator that the checkbox was checked and its absence means unchecked. If we change that contract for switches, now they have two weird things to deal with on the backend and the natural argument will be "why are switches different from checkboxes?"

At the end of the day, it's an opinion. I wish checkboxes could submit boolean true/false values directly from HTML. Alas, it seems like the best way to deal with it is to remain consistent with the platform and let users handle it on the backend. Perhaps a middleware (either on the client during submit or on the server during parsing) could help to map known boolean form controls to actual boolean values.

[davidmcguiredesign]

Thanks for the in-depth response! I’ll try one more time, but mostly I’m grateful that you’ve made your careful work on Shoelace available.

[davidmcguiredesign]

Consistency with the platform is important, but Shoelace has aimed higher, by addressing two well-known problems of the platform:

1. Ugly default inputs (i.e, selects)
2. Missing common functionality (i.e, drawers, carousels)

Checkboxes, Selects, and Radios address Problem 1, so I see how they would be out-of-scope to address Problem 2. But a Switch is not a native web element, so I hoped Shoelace’s solution could go beyond restyling a checkbox to address Problem 2.

If you’ve decided solving the problem within the Switch component is out-of-scope, what about solving the problem with a wrapper component similar to the Radio Group component? For instance, it could be called Toggle Pair, and could be wrapped around a switch or a checkbox, such that when unchecked, a false/falsey value would be submitted. Would you be open to reviewing such a pull request?

[claviska]

I get that you'd really like to see this, but this is a breaking change so we can't do it in 2.x. And if we did, you'd still need to build some kind of client- or server-side logic to account for checkboxes. Presumably, this logic could be reused for switch.

what about solving the problem with a wrapper component similar to the Radio Group component?

Native radios are a bit special. Radio group is a controller that makes it much, much easier for framework users to bind a value to. It's not just sugar for submission. However, nothing stops you from writing a tiny component that wraps and maps the value to whatever form you expect :)

I'll keep your suggestion in mind when we talk about 3.x down the road!