By clicking this checkbox, you agree to the terms and conditions.
<script lang="ts">
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<div class="flex flex-col gap-6">
<div class="flex items-center gap-3">
<Checkbox id="terms" />
<Label for="terms">Accept terms and conditions</Label>
</div>
<div class="flex items-start gap-3">
<Checkbox id="terms-2" checked />
<div class="grid gap-2">
<Label for="terms-2">Accept terms and conditions</Label>
<p class="text-muted-foreground text-sm">
By clicking this checkbox, you agree to the terms and conditions.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<Checkbox id="toggle" disabled />
<Label for="toggle">Enable notifications</Label>
</div>
<Label
class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
>
<Checkbox
id="toggle-2"
checked
class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
/>
<div class="grid gap-1.5 font-normal">
<p class="text-sm leading-none font-medium">Enable notifications</p>
<p class="text-muted-foreground text-sm">
You can enable or disable notifications at any time.
</p>
</div>
</Label>
</div>Installation
pnpm dlx shadcn-svelte@latest add checkboxInstall bits-ui:
pnpm add bits-ui -DCopy and paste the following code into your project.
<script lang="ts">
import { Checkbox as CheckboxPrimitive } from 'bits-ui';
import { cn, type WithoutChildrenOrChild } from '$UTILS$.js';
import CheckIcon from 'phosphor-svelte/lib/Check';
import MinusIcon from 'phosphor-svelte/lib/Minus';
let {
ref = $bindable(null),
checked = $bindable(false),
indeterminate = $bindable(false),
class: className,
...restProps
}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
</script>
<CheckboxPrimitive.Root
bind:ref
data-slot="checkbox"
class={cn(
'border-zinc-700 bg-background data-checked:bg-[#b9d765] data-checked:text-[#101207] data-checked:border-[#b9d765] dark:data-checked:bg-[#b9d765] aria-invalid:aria-checked:border-[#b9d765] aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-zinc-300 focus-visible:ring-zinc-300/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4.5 items-center justify-center rounded-none border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-2 aria-invalid:ring-2 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
bind:checked
bind:indeterminate
{...restProps}
>
{#snippet children({ checked, indeterminate })}
<div
data-slot="checkbox-indicator"
class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
>
{#if checked}
<CheckIcon />
{:else if indeterminate}
<MinusIcon />
{/if}
</div>
{/snippet}
</CheckboxPrimitive.Root>
import Root from './checkbox.svelte';
export {
Root,
//
Root as Checkbox
};
Usage
<script lang="ts">
import { Checkbox } from '$lib/components/ui/checkbox/index.js';
</script><Checkbox />