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} onchange={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} onchange={handleModeChange}>
	{#snippet inactiveChild()}<IconMoon size="14" />{/snippet}
	{#snippet activeChild()}<IconSun size="14" />{/snippet}
</Switch>