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-none border border-border p-3 has-[[aria-checked=true]]:border-primary/45 has-[[aria-checked=true]]:bg-primary-wash"
>
<Checkbox id="toggle-2" checked />
<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 jsrepo@latest add checkboxnpx jsrepo@latest add checkboxyarn dlx jsrepo@latest add checkboxbunx jsrepo@latest add checkboxInstall bits-ui:
pnpm add bits-ui -Dnpm install bits-ui -Dyarn add bits-ui -Dbun 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 '$lib/utils.js';
import CheckIcon from 'phosphor-svelte/lib/CheckIcon';
import MinusIcon from 'phosphor-svelte/lib/MinusIcon';
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-border bg-background data-checked:bg-primary data-checked:text-primary-foreground data-checked:border-primary dark:data-checked:bg-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4.5 items-center justify-center rounded-control border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 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>
Usage
<script lang="ts">
import { Checkbox } from '$lib/components/ui/checkbox/index.js';
</script><Checkbox />