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

[Loizzus]

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' })

[cherdarchuk]

Is there a way to set the value externally after the component has already been created? E.g. if I had two switches on the page, one at the top and another at the bottom and I wanted to keep them synced. With the rgossiaux library binding them both to the same value would do this, but there does not seem to be a way to bind to a variable so it updates dynamically with that variable rather than just when the user interacts with the component?

[CaptainCodeman]

You can set the $switch.checked property as needed, and the control should update.

You can also create one instance of the component and use it in the markup twice, and they should be in sync.

See: https://svelte.dev/playground/0ecfa0d6abb94dff9fc997cb74dce901?version=5.1.12

[cherdarchuk]

Wow thanks for the quick response. I guess I'm struggling with it if I've wrapped it in a component.

I've modified your example here: https://svelte.dev/playground/161b0f82e7b14bbe9f0ed8060e15a949?version=5.1.12

In the playground you can add the following and it will work, but you get a cyclic dependency error from vite.

$: checked = $sw.checked;
$: $sw.checked = checked;