<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
let checked = $state(false);
</script>
<Switch.Root label="Switch" bind:checked />
Import
import * as Switch from "kumo-svelte/components/switch";Usage
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
let checked = $state(false);
</script>
<Switch.Root label="Switch" bind:checked />Examples
Off State
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<Switch.Root label="Switch" checked={false} />
On State
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<Switch.Root label="Switch" checked />
Disabled
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<Switch.Root label="Disabled" checked={false} disabled />
Variants
The Switch supports two variants: default (blue when on) and neutral (monochrome). Both use a squircle shape.
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<div class="grid grid-cols-2 gap-x-8 gap-y-4">
<Switch.Root label="Default off" checked={false} />
<Switch.Root label="Default on" checked />
<Switch.Root label="Neutral off" variant="neutral" checked={false} />
<Switch.Root label="Neutral on" variant="neutral" checked />
</div>
Neutral Variant
The neutral variant uses monochrome colors and a squircle shape, ideal for subtle, less prominent toggles.
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
let checked = $state(false);
</script>
<Switch.Root label="Neutral switch" variant="neutral" bind:checked />
Neutral States
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<div class="flex flex-col gap-4">
<Switch.Root label="Neutral off" variant="neutral" checked={false} />
<Switch.Root label="Neutral on" variant="neutral" checked />
<Switch.Root label="Neutral disabled" variant="neutral" checked={false} disabled />
</div>
Sizes
Three sizes available: sm, base (default), and lg.
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<div class="flex flex-col gap-4">
<Switch.Root label="Small" size="sm" checked />
<Switch.Root label="Base (default)" size="base" checked />
<Switch.Root label="Large" size="lg" checked />
</div>
Custom ID
When a custom id is provided, clicking the label still toggles the switch.
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
let checked = $state(false);
</script>
<Switch.Root id="my-custom-switch" label="Custom ID" bind:checked />
Switch Group
Group related switches with Switch.Group. Provides a shared legend, description, and error message for the group.
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<Switch.Group legend="Notification settings">
<Switch.Item label="Email notifications" />
<Switch.Item label="SMS notifications" />
<Switch.Item label="Push notifications" />
</Switch.Group>
Visually Hidden Legend
Use Switch.Legend with class="sr-only" to keep the legend accessible to screen readers while hiding it visually.
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<Switch.Group>
<Switch.Legend class="sr-only">Notification settings</Switch.Legend>
<Switch.Item label="Email notifications" />
<Switch.Item label="SMS notifications" />
<Switch.Item label="Push notifications" />
</Switch.Group>
Custom Legend Styling
Switch.Legend accepts class for full control over legend presentation.
<script lang="ts">
import * as Switch from "kumo-svelte/components/switch";
</script>
<Switch.Group>
<Switch.Legend class="text-sm font-normal text-kumo-subtle">Notification settings</Switch.Legend>
<Switch.Item label="Email notifications" />
<Switch.Item label="SMS notifications" />
<Switch.Item label="Push notifications" />
</Switch.Group>
API Reference
Switch
| Prop | Type | Default |
|---|---|---|
| checked | boolean | false |
| class | string | — |
| controlFirst | boolean | true |
| disabled | boolean | false |
| id | string | — |
| label | Snippet | string | — |
| labelTooltip | Snippet | — |
| name | string | — |
| onCheckedChange | (checked: boolean) => void | — |
| required | boolean | — |
| size | KumoSwitchSize | KUMO_SWITCH_DEFAULT_VARIANTS.size |
| transitioning | boolean | — |
| value | string | — |
| variant | SwitchVariant | KUMO_SWITCH_DEFAULT_VARIANTS.variant |
| aria-label | string | — |
| aria-labelledby | string | — |
Switch.Control
| Prop | Type | Default |
|---|---|---|
| checked | boolean | false |
| class | string | — |
| disabled | boolean | false |
| id | string | — |
| name | string | — |
| onCheckedChange | (checked: boolean) => void | — |
| required | boolean | — |
| size | KumoSwitchSize | KUMO_SWITCH_DEFAULT_VARIANTS.size |
| transitioning | boolean | — |
| value | string | — |
| variant | SwitchVariant | KUMO_SWITCH_DEFAULT_VARIANTS.variant |
| aria-label | string | — |
| aria-labelledby | string | — |
Switch.Group
| Prop | Type | Default |
|---|---|---|
| children* | Snippet | — |
| class | string | — |
| controlFirst | boolean | true |
| description | Snippet | string | — |
| disabled | boolean | false |
| error | string | — |
| legend | string | — |
Switch.Item
| Prop | Type | Default |
|---|---|---|
| checked | boolean | false |
| class | string | — |
| disabled | boolean | false |
| id | string | — |
| label* | Snippet | string | — |
| onCheckedChange | (checked: boolean) => void | — |
| size | KumoSwitchSize | KUMO_SWITCH_DEFAULT_VARIANTS.size |
| transitioning | boolean | — |
| variant | SwitchVariant | KUMO_SWITCH_DEFAULT_VARIANTS.variant |
Switch.Legend
| Prop | Type | Default |
|---|---|---|
| children* | Snippet | — |
| class | string | — |