How am I supposed to get the value from this component?

[Loizzus]

trafficstars

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.

[CaptainCodeman]

The .checked or .pressed properties will give you the current value.

Maybe you meant set the initial value instead? You should be able to pass those into the factory function, e.g.:

const sw = createSwitch({ checked: true })

[Loizzus]

Ok, so it should look like this? Which seems to work well.

import { createSwitch } from 'svelte-headlessui';

export let mydata;

const sw = createSwitch({ checked: mydata.Display == true });

$: mydata.Display = $sw.checked;

Could you change your example here. I find this example confusing for trying to set the initial value. const sw = createSwitch({ label: 'Set Preference' })