Switch - Skeleton

Label

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

<Switch>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch>

List

Label 1

Label 2

Label 3

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

<div class="grid gap-2 w-full">
  {#each ['Label 1', 'Label 2', 'Label 3'] as label, i (label)}
    <Switch class="flex justify-between p-2">
      <Switch.Label>{label}</Switch.Label>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.HiddenInput />
    </Switch>
    {#if i < 2}
      <hr class="hr" />
    {/if}
  {/each}
</div>

Icons

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

<Switch>
  <Switch.Control>
    <Switch.Thumb>
      <Switch.Context>
        {#snippet children(switch_)}
          {#if switch_().checked}
            <Sun class="size-3" />
          {:else}
            <Moon class="size-3" />
          {/if}
        {/snippet}
      </Switch.Context>
    </Switch.Thumb>
  </Switch.Control>
  <Switch.HiddenInput />
</Switch>

Direction

Label

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

<Switch dir="rtl">
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch>

API Reference

Root

cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50 inline-flex gap-2 items-center rounded data-focus-visible:outline-2 data-focus-visible:outline-offset-1 data-focus-visible:outline-surface-950-50

Property	Default	Type
`ids`	-	Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> \| undefined The ids of the elements in the switch. Useful for composition.
`label`	-	string \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`disabled`	-	boolean \| undefined Whether the switch is disabled.
`invalid`	-	boolean \| undefined If `true`, the switch is marked as invalid.
`required`	-	boolean \| undefined If `true`, the switch input is marked as required,
`readOnly`	-	boolean \| undefined Whether the switch is read-only
`onCheckedChange`	-	((details: CheckedChangeDetails) => void) \| undefined Function to call when the switch is clicked.
`checked`	-	boolean \| undefined The controlled checked state of the switch
`defaultChecked`	-	boolean \| undefined The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch.
`name`	-	string \| undefined The name of the input field in a switch (Useful for form submission).
`form`	-	string \| undefined The id of the form that the switch belongs to
`value`	"on"	string \| number \| undefined The value of switch input. Useful for form submission.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	-	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	() => SwitchApi<PropTypes>
`element`	-	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[() => SwitchApi<PropTypes>]>

Control

block preset-filled-surface-200-800 h-6 w-10 p-0.5 rounded-full flex justify-start data-[state=checked]:preset-filled-primary-500

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

Thumb

grid justify-center items-center h-full aspect-square rounded-full bg-surface-50 text-surface-contrast-50 fill-surface-contrast-50 transition-transform duration-100 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

Label

label-text

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

HiddenInput

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself