How to toggle a switch in Svelte

[yurivish]

Hi all,

Happy holidays and congrats on this project - seems like an amazing idea to have a robust and well-supported cross-platform, cross-framework set of web components.

I backed this project today and started playing around, but am having some trouble and was hoping you can help.

I'm trying to use a wa-switch in Svelte, but cannot figure out how to link the switch appropriately to a piece of Svelte state, in a "controlled component" pattern.

In the example below, I want the button to toggle the switch, but it doesn't quite seem to work. For example, the default state if false, but the switch shows up checked:

Playground link

Wondering if I'm missing something obvious. I checked all of the places in the docs that seemed they might be relevant, but wasn't able to figure this out.

I'm also not sure if this is an issue/question for Svelte since the valueless checked attribute is not updating the way I would expect, but I wasn't able to find much on this in the Svelte docs either.

Thank you!

[KonnorRogers]

So this is actually a bug I'll have fixed in the next release 🤦

Our 'dirty checker' isn't flagging changes to checked.

If you want a fix today ,you can use the defaultChecked property. I'll work on a proper fix for checked so it behaves like checkbox.

EDIT: playground: https://svelte.dev/playground/6177c10d32574c33b6815a63df93a2b0?version=5.15.0

[yurivish]

Aha, thank you for the explanation and workaround (and quick response)!

[yurivish]

Actually, I still have a question – it looks like if you set the initial state to true and use defaultChecked, then the checkbox is not checked at first render:

Playground

I'm not sure I understand what's going on there – do you know if there's a simple way to get the right initial state, as well as updates?

[KonnorRogers]

ahhh right. So the defaultChecked is the property, but you want the attribute.

Easy fix is to bind to both.

https://svelte.dev/playground/11c655989cb64493a0869025e63f0d1c?version=5.15.0#H4sIAAAAAAAAE6WTQU-DMBTHv0ptPGyJa008mCCgi949qPEgHkp5G7hSCH3bXAjf3RZY6KLGg-FA-_r-__fr49FSLUqgAX2FlCz3YKoSyNO-QJnf0gu6KhQYGry1FA-1S3MBGx9Fy7pmZgcKXSwVBn6Ky0ojaLQ2NDSyKWqME52gAiSmL_SoSUTODQqEGTZbmN8kOuRTqg4HryAHkfVa94Sq0Jvjxj0NqCihBg8WOQfAhPqneQMre5wj1ibgHESjDmwPqRjuzGRV8ml7d8Uu2eVCqDoX7JpnhUE-OHPMobSvDFZiq5BJY6ZCfKIb8H0C10FLUFbZVsEpnGnk_9i8ZFWJDBr24WHFXjft8rSZOsyKXc_9omUOcgNZQMK9WAwfx2qntZOP2ZPs_ruIjEZ_i5-r9VqBSBUEbutZjA0e3aP2OCvd0dwPVVqqQm6idgZzEsWkdWaEEGB1Azs7fQ-D22yeaEK67hewHssbyqnChN7jp1vESntl-6ozT3p2XM-7eLhkyAdVbP8JhE-kgRv27r37Ag1ecB6EAwAA

[yurivish]

I tried that before I posted but noticed that if the state is false then the checkbox starts out checked even though it shouldn't. (Ie. if you set checked then it is always initially checked regardless of value, but if you set defaultChecked then it is always initially unchecked, and if both then it's always checked): https://svelte.dev/playground/e552f2d1f4d4490e908315d778b12af0?version=5.15.0

[yurivish]

If there’s no easy way to work around in the current version then don't worry about it -- it's no problem for me to wait until the next release. Thanks for the help!