Switch

A control that allows the user to toggle between checked and not checked.

Component Source

View the source code for the switch component.

$lib/components/ui/switch/switch.svelte

npx nnuikit add switch

import Switch from "$lib/components/ui/switch/switch.svelte";

Enable notifications

<div class="flex items-center gap-3">
  <Switch />
  <span class="text-sm font-medium">Enable notifications</span>
</div>

Customize settings, sizes, and states.

Enable notifications

<div class="flex items-center gap-3">
  <Switch />
  <span class="text-sm font-medium">Enable notifications</span>
</div>

Show Icon

Disabled

Different switch sizes.

Small

<Switch size="sm" />

Medium

<Switch size="md" />

Large

<Switch size="lg" />

Native input: uses <input type='checkbox' role='switch'>

Keyboard: Space toggles the switch

ARIA: aria-checked reflects current state

Disabled: native disabled attribute + visual indicator

Prop	Type	Default	Description
`checked`	`boolean`	false	The controlled checked state of the switch.
`disabled`	`boolean`	false	Whether the switch is disabled.
`size`	`"sm" \| "md" \| "lg"`	"md"	The size of the switch.
`showIcon`	`boolean`	false	Whether to show the icon inside the thumb.