Sivir UI
79

Checkbox

The native checkbox sits inside a label, so clicking the text toggles it. The primary variant draws a bordered row that tints when checked.

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

<Checkbox label="Accept terms of service" />

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add checkbox

Usage

Bind checked, or pass onCheckedChange to react to changes. description renders only when label is set.

import { Checkbox } from '@sivir-ui/svelte/components/checkbox';

let accepted = $state(false);

<Checkbox bind:checked={accepted} label="I agree to the terms of service" />

Examples

Notification preferences

Email preferences

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

    let emailMarketing = $state(true);
    let emailUpdates = $state(true);
    let emailSecurity = $state(true);
</script>

<div class="w-full max-w-md">
    <div class="mb-4">
        <h3 class="text-foreground [font-weight:var(--font-weight-label,500)]">
            Email preferences
        </h3>
    </div>
    <div class="space-y-4">
        <Checkbox
            bind:checked={emailMarketing}
            label="Product news"
            description="Be the first to hear about new features and updates"
        />
        <Checkbox
            bind:checked={emailUpdates}
            label="Tips and tutorials"
            description="Learn best practices and improve your workflow"
        />
        <Checkbox
            bind:checked={emailSecurity}
            label="Security alerts"
            description="Receive important notifications about your account"
        />
    </div>
</div>

Disabled by policy

Access control

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

<div class="w-full max-w-md">
    <div class="mb-4">
        <h3 class="text-foreground [font-weight:var(--font-weight-label,500)]">Access control</h3>
    </div>
    <div class="space-y-3">
        <Checkbox label="Edit project settings" description="Full admin access" checked={true} />
        <Checkbox
            label="Manage members"
            description="Add, remove, and edit team members"
            checked={true}
        />
        <Checkbox
            label="Export data"
            description="This option is disabled by organization policy"
            disabled
            checked={false}
        />
    </div>
</div>

Controlled state

On
On
Off
<script lang="ts">
    import { Checkbox } from '@sivir-ui/svelte/components/checkbox';

    let darkMode = $state(true);
    let notifications = $state(true);
    let analyticsCookie = $state(false);
</script>

<div class="w-full max-w-md">
    <div class="space-y-4">
        <div
            class="flex items-center justify-between rounded-[var(--radius-md)] border-[length:var(--border-size)] border-border px-3 py-2"
        >
            <Checkbox bind:checked={darkMode} label="Dark mode" />
            <span class="text-xs text-foreground-muted">
                {darkMode ? 'On' : 'Off'}
            </span>
        </div>
        <div
            class="flex items-center justify-between rounded-[var(--radius-md)] border-[length:var(--border-size)] border-border px-3 py-2"
        >
            <Checkbox bind:checked={notifications} label="Push notifications" />
            <span class="text-xs text-foreground-muted">
                {notifications ? 'On' : 'Off'}
            </span>
        </div>
        <div
            class="flex items-center justify-between rounded-[var(--radius-md)] border-[length:var(--border-size)] border-border px-3 py-2"
        >
            <Checkbox bind:checked={analyticsCookie} label="Analytics" />
            <span class="text-xs text-foreground-muted">
                {analyticsCookie ? 'On' : 'Off'}
            </span>
        </div>
    </div>
</div>

Anatomy

Checkbox - Selects or clears a boolean value.