Switch

<script lang="ts">
  import { Switch } from '@skeletonlabs/skeleton-svelte';

  // You can optionally bind the checked state.
  let state = $state(false);
</script>

<Switch name="example" bind:checked={state} onCheckedChange={console.log} />

<script lang="ts">
  import { Switch } from '@skeletonlabs/skeleton-svelte';

  let disturb = $state(false);
  let notifications = $state(true);
  let disabled = $state(false);
</script>

<section class="w-full space-y-4">
  <div class="flex justify-between items-center gap-4">
    <p>Default to the inactive state.</p>
    <Switch name="disturb" bind:checked={disturb}></Switch>
  </div>
  <hr class="hr" />
  <div class="flex justify-between items-center gap-4">
    <p>Default to the active state.</p>
    <Switch name="notifications" bind:checked={notifications}></Switch>
  </div>
  <hr class="hr" />
  <div class="flex justify-between items-center gap-4">
    <p>Shown in disabled mode.</p>
    <Switch name="disabled" bind:checked={disabled} disabled></Switch>
  </div>
</section>

<script lang="ts">
  import { Switch } from '@skeletonlabs/skeleton-svelte';
  // Icons
  import IconX from 'lucide-svelte/icons/x';
  import IconCheck from 'lucide-svelte/icons/check';
</script>

<Switch name="icons" controlActive="bg-secondary-500">
  {#snippet inactiveChild()}<IconX size="14" />{/snippet}
  {#snippet activeChild()}<IconCheck size="14" />{/snippet}
</Switch>

<script lang="ts">
  import { Switch } from '@skeletonlabs/skeleton-svelte';
  // Icons
  import IconFrown from 'lucide-svelte/icons/frown';
  import IconSmile from 'lucide-svelte/icons/smile';
</script>

<Switch name="compact" controlWidth="w-9" controlActive="preset-filled-tertiary-500" compact>
  {#snippet inactiveChild()}<IconFrown size="20" />{/snippet}
  {#snippet activeChild()}<IconSmile size="20" />{/snippet}
</Switch>

<script lang="ts">
  import { Switch } from '@skeletonlabs/skeleton-svelte';
  // Icons
  import IconMoon from 'lucide-svelte/icons/moon';
  import IconSun from 'lucide-svelte/icons/sun';

  // Bind to the checked state
  let mode = $state(false);

  // Handle the change in state when toggled.
  function handleModeChange() {
    // NOTE: implementation may differ per Tailwind config and framework:
    // https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
    console.log({ mode });
  }
</script>

<Switch name="mode" controlActive="bg-surface-200" bind:checked={mode} onCheckedChange={handleModeChange}>
  {#snippet inactiveChild()}<IconMoon size="14" />{/snippet}
  {#snippet activeChild()}<IconSun size="14" />{/snippet}
</Switch>