Checkbox
A control that allows the user to toggle between checked and not checked.
Loading preview…
1<script lang="ts">
2 import { Checkbox } from './index.js';
3</script>
4
5<div class="flex flex-col gap-6">
6 <div class="flex items-center gap-3">
7 <Checkbox id="terms-preview" />
8 <label for="terms-preview" class="text-sm leading-none font-medium">
9 Accept terms and conditions
10 </label>
11 </div>
12 <div class="flex items-start gap-3">
13 <Checkbox id="terms-checked-preview" checked />
14 <div class="grid gap-2">
15 <label for="terms-checked-preview" class="text-sm leading-none font-medium">
16 Accept terms and conditions
17 </label>
18 <p class="text-sm text-muted-foreground">
19 By clicking this checkbox, you agree to the terms and conditions.
20 </p>
21 </div>
22 </div>
23</div>
24Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/checkbox/index.ts
- ~/components/checkbox/checkbox.svelte
Usage
Use checkbox for independent on/off choices. Bind checked or pass indeterminate for a partial state.
Pair with a label via matching id and for attributes.
1<script lang="ts">
2 import { Checkbox } from '~/components/checkbox';
3</script>
4
5<div class="flex items-center gap-3">
6 <Checkbox id="terms" />
7 <label for="terms">Accept terms and conditions</label>
8</div>