Switch

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

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

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

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

<section class="w-full space-y-4">
	<label class="label flex items-center justify-between gap-4" for="inactive">
		<p>Default to the inactive state.</p>
		<Switch id="inactive" name="inactive" />
	</label>
	<hr class="hr" />
	<label class="label flex items-center justify-between gap-4" for="active">
		<p>Default to the active state.</p>
		<Switch id="active" name="active" checked />
	</label>
	<hr class="hr" />
	<label class="label flex items-center justify-between gap-4" for="disabled">
		<p>Shown in disabled mode.</p>
		<Switch id="disabled" name="disabled" disabled />
	</label>
</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 id="icons" name="icons" stateActive="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 id="compact" name="compact" width="w-9" stateActive="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 id="mode" name="mode" stateActive="bg-surface-200" bind:checked={mode} onchange={handleModeChange}>
	{#snippet inactiveChild()}<IconMoon size="14" />{/snippet}
	{#snippet activeChild()}<IconSun size="14" />{/snippet}
</Switch>