Checkbox

A control that toggles between checked, unchecked, and indeterminate.

Accept terms and conditions

<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

npx lily-svelte@latest add checkbox

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy 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>

← Carousel Collapsible →