Sivir UI
79

Switch

A button with the switch role, for settings that apply as soon as they change. Use a Checkbox when the choice is saved with a form.

<script lang="ts">
    import { Switch } from '@sivir-ui/svelte/components/switch';

    let enabled = $state(true);
</script>

<Switch bind:checked={enabled} label="Push notifications" />

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add switch

Usage

Bind checked to read and set the state. The older switched prop still works.

import { Switch } from '@sivir-ui/svelte/components/switch';

let enabled = $state(false);

<Switch bind:checked={enabled} label="Email notifications" />

Click, tap, or press Space or Enter to toggle, or drag the thumb across the track and release it on either side. The thumb follows a spring, stretches while pressed or moving, and the track fills with the primary color as the thumb travels. Clicking the label toggles the switch too. With reduced motion, the thumb moves without animating.

Theme the motion with --motion-duration-switch (default 280ms, lower is faster, 0ms snaps) and --motion-switch-stretch (default 1, 0 turns the stretch off).

Examples

Basic

Notifications

<script lang="ts">
    import { Switch } from '@sivir-ui/svelte/components/switch';

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

<div class="w-full max-w-xs space-y-3 rounded-lg border border-border bg-surface p-4">
    <p class="text-sm font-medium text-foreground">Notifications</p>
    <div class="space-y-2">
        <Switch bind:checked={emailNotifications} label="Email notifications" />
        <Switch bind:checked={smsNotifications} label="Text message alerts" />
    </div>
</div>

With description

<script lang="ts">
    import { Switch } from '@sivir-ui/svelte/components/switch';

    let autoSave = $state(true);
    let spellCheck = $state(true);
    let offline = $state(false);
</script>

<div class="w-full max-w-sm space-y-4">
    <Switch
        bind:checked={autoSave}
        label="Auto-save"
        description="Save drafts every 30 seconds while you edit."
    />
    <Switch
        bind:checked={spellCheck}
        label="Spell check"
        description="Highlight misspelled words as you type."
    />
    <Switch
        bind:checked={offline}
        label="Work offline"
        description="Keep writing without an internet connection."
    />
</div>

Disabled

Sync

<script lang="ts">
    import { Switch } from '@sivir-ui/svelte/components/switch';

    let syncWifi = $state(true);
</script>

<div class="w-full max-w-sm space-y-3 rounded-lg border border-border bg-surface p-4">
    <p class="text-sm font-medium text-foreground">Sync</p>
    <div class="space-y-3">
        <Switch bind:checked={syncWifi} label="Sync over Wi-Fi" />
        <Switch
            disabled
            label="Sync over cellular"
            description="Upgrade to Pro to enable background sync on mobile networks."
        />
    </div>
</div>

Anatomy

Switch - Toggles a boolean value.