Checkbox
MD3 checkbox.
Try it
Knobs
tone size <script> import { Checkbox } from 'omaris';</script><Checkbox label="Remember me" />Walkthrough
1. Basic
A choice submitted with the form. The label is a prop wired to the control, so clicking the text toggles it too.
<script lang="ts"> import { Checkbox } from 'omaris'; let agreed = $state(false);</script><Checkbox label="Email me about outages" bind:checked={agreed} />2. Description and states
indeterminate is the parent of a partly-checked set, not a third value.
<script lang="ts"> import { Checkbox } from 'omaris'; let email = $state<boolean>(true); let sms = $state<boolean>(false); const all = $derived(email && sms); const some = $derived((email || sms) && !all); function toggleAll() { const next = !all; email = next; sms = next; }</script><div class="flex flex-col gap-3"> <Checkbox label="Notifications" description="Two channels available" checked={all} indeterminate={some} onchange={toggleAll} /> <div class="flex flex-col gap-3 ps-7"> <Checkbox label="Email" bind:checked={email} /> <Checkbox label="SMS" bind:checked={sms} /> </div> <Checkbox label="Disabled" disabled /> <Checkbox label="Invalid" invalid description="You have to accept the terms." /></div>3. Tones and sizes
Any colour role — success for a consent, destructive for a dangerous opt-in — and lg where a thumb needs the room.
<script lang="ts"> import { Checkbox } from 'omaris';</script><Checkbox label="primary" checked /><Checkbox label="success" tone="success" checked /><Checkbox label="destructive" tone="destructive" checked /><Checkbox label="Large" size="lg" checked />4. Drag to paint
Press one box and drag down the column: every box the pointer crosses lands on the state the first one was heading to. On a touch screen, hold for a moment first so a scroll stays a scroll.
2 of 8 connected
<script lang="ts"> import { Checkbox, Text } from 'omaris'; const services = ['Vercel', 'Linear', 'GitHub', 'Figma', 'Stripe', 'Notion', 'Dropbox', 'Asana']; let connected = $state<string[]>(['GitHub', 'Figma']); function toggle(service: string) { connected = connected.includes(service) ? connected.filter((entry) => entry !== service) : [...connected, service]; }</script><div class="w-full max-w-xs"> <ul class="divide-y divide-border overflow-hidden rounded-lg border border-border"> {#each services as service (service)} {@const on = connected.includes(service)} <li class="flex items-center gap-2 px-2 transition-colors duration-150 ease-standard motion-reduce:transition-none" class:bg-primary-container={on} > <Checkbox label={service} checked={on} onchange={() => toggle(service)} /> </li> {/each} </ul> <Text variant="body-sm" class="mt-2 text-muted-foreground"> {connected.length} of {services.length} connected </Text></div>