svelte-headlessui
svelte-headlessui copied to clipboard
How am I supposed to get the value from this component?
For a switch in rgossiaux headlessUI I would use something like this:
<Switch bind:checked={bowl.Display} class={bowl.Display ? 'switch switch-enabled' : 'switch switch-disabled'}>
<span class="sr-only">Enable notifications</span>
<span class="toggle" class:toggle-on={bowl.Display} class:toggle-off={!bowl.Display} />
</Switch>
Where the bind:checked was how I would set the value and have it be changed.
But in my similar implementation for this library:
<button class="switch" use:sw.toggle>
<span class="sr-only">Use setting</span>
<span aria-hidden="true" class="{$sw.checked ? 'switch-enabled2' : 'switch-disabled2'} toggle" />
</button>
I'm unsure what is the correct way to bind this switch with a value. The documentation seems to gloss over this.