Switch

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

  let state = $state(false);
</script>

<Switch name="example" checked={state} onCheckedChange={(e) => (state = e.checked)} />

List

Default to the inactive state.

Default to the active state.

Shown in disabled mode.

<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" checked={disturb} onCheckedChange={(e) => (disturb = e.checked)}></Switch>
  </div>
  <hr class="hr" />
  <div class="flex justify-between items-center gap-4">
    <p>Default to the active state.</p>
    <Switch name="notifications" checked={notifications} onCheckedChange={(e) => (notifications = e.checked)}></Switch>
  </div>
  <hr class="hr" />
  <div class="flex justify-between items-center gap-4">
    <p>Shown in disabled mode.</p>
    <Switch name="disabled" checked={disabled} onCheckedChange={(e) => (disabled = e.checked)} disabled></Switch>
  </div>
</section>

Icons

Pass icons through the inactiveChild and activeChild snippets respectively.

<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>

Compact

Apply the compact prop to switch a minimal display.

<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>

Lightswitch

This is a full fledge example using multiple features.

<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(checked: boolean) {
    // NOTE: implementation may differ per Tailwind config and framework:
    // https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
    console.log({ mode });
    mode = checked;
  }
</script>

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

Anatomy

<Switch>

<label>

(unlabled)

<input>

control

<span>

thumb

<span>

iconActiveBase|iconInactiveBase

<span>

label

<span>

API Reference

Property	Type	Description
`compact`	boolean	Set the compact display mode.
`base`	string	Set base classes for the root element.
`classes`	string	Provide arbitrary classes to the root element.
`stateFocused`	string	Set classes for the focus state.
`controlBase`	string	Set base classes for the control element.
`controlInactive`	string	Set inactive state classes for the control element.
`controlActive`	string	Set active state classes for the control element.
`controlDisabled`	string	Set disabled state classes for the control element.
`controlWidth`	string	Set width classes for the control element.
`controlHeight`	string	Set height classes for the control element.
`controlPadding`	string	Set padding classes for the control element.
`controlRounded`	string	Set rounded classes for the control element.
`controlHover`	string	Set hover classes for the control element.
`controlClasses`	string	Provide arbitrary classes to the control element.
`thumbBase`	string	Set base classes for the thumb element.
`thumbInactive`	string	Set inactive classes for the thumb element.
`thumbActive`	string	Set active classes for the thumb element.
`thumbRounded`	string	Set rounded classes for the thumb element.
`thumbTranslateX`	string	Set animation X-axis translate classes for the thumb element.
`thumbTransition`	string	Set animation transition classes for the thumb element.
`thumbEase`	string	Set animation easing classes for the thumb element.
`thumbDuration`	string	Set animation duration classes for the thumb element.
`thumbClasses`	string	Provide arbitrary classes to the thumb element.
`labelBase`	string	Set base classes for the label element.
`labelClasses`	string	Provide arbitrary classes to the label element.
`iconInactiveBase`	string	Set base classes for the inactive icon child.
`iconActiveBase`	string	Set base classes for the active icon child.
`children`	Snippet<[]>	The default children snippet.
`inactiveChild`	Snippet<[]>	The inactive state snippet.
`activeChild`	Snippet<[]>	The active state snippet.
`ids`		The ids of the elements in the switch. Useful for composition.
`value`	string \| number	The value of switch input. Useful for form submission. Default: "on"
`disabled`	boolean	Whether the switch is disabled.
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`name`	string	The name of the input field in a switch (Useful for form submission).
`required`	boolean	If `true`, the switch input is marked as required,
`invalid`	boolean	If `true`, the switch is marked as invalid.
`label`	string	Specifies the localized strings that identifies the accessibility elements and their states
`form`	string	The id of the form that the switch belongs to
`readOnly`	boolean	Whether the switch is read-only
`onCheckedChange`		Function to call when the switch is clicked.
`checked`	boolean	The controlled checked state of the switch
`defaultChecked`	boolean	The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch.