Checkbox
A control that toggles between checked, unchecked, and indeterminate.
<script lang="ts">
import { Checkbox } from "$lib/components/ui/checkbox";
import { Label } from "$lib/components/ui/label";
</script>
<div class="flex items-center gap-3">
<Checkbox id="terms" />
<Label for="terms">Accept terms and conditions</Label>
</div>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the checkbox source from the registry into $lib/components/ui/checkbox.
Usage
<script lang="ts">
import { Checkbox } from '$lib/components/ui/checkbox';
import { Label } from '$lib/components/ui/label';
let checked = $state(false);
</script>
<div class="flex items-center gap-3">
<Checkbox id="terms" bind:checked />
<Label for="terms">Accept terms and conditions</Label>
</div>