Checkbox

A binary input control for selecting true or false states

Basic Usage

Get notified about updates and new features


Code Svelte
1
2<script lang="ts">
3  import { Checkbox } from "@kareyes/aether";
4
5  let basicChecked = $state(false);
6  let withLabelChecked = $state(false);
7  let withDescriptionChecked = $state(false);
8</script>
9
10<div class="space-y-4">
11  <Checkbox bind:checked={basicChecked} />
12  <Checkbox
13    bind:checked={withLabelChecked}
14    label="Accept terms and conditions"
15  />
16  <Checkbox
17    bind:checked={withDescriptionChecked}
18    label="Enable notifications"
19    description="Get notified about updates and new features"
20  />
21</div>

Sizes


Code Svelte
1
2<script lang="ts">
3  import { Checkbox } from "@kareyes/aether";
4
5  let smallChecked = $state(false);
6  let defaultChecked = $state(false);
7  let largeChecked = $state(false);
8  let xlChecked = $state(false);
9</script>
10
11<div class="flex items-center gap-6">
12  <Checkbox bind:checked={smallChecked} size="sm" label="Small" />
13  <Checkbox bind:checked={defaultChecked} size="default" label="Default" />
14  <Checkbox bind:checked={largeChecked} size="lg" label="Large" />
15  <Checkbox bind:checked={xlChecked} size="xl" label="Extra Large" />
16</div>

Variants

This action cannot be undone

This will mark the task as done

This action requires attention


Code Svelte
1
2<script lang="ts">
3  import { Checkbox } from "@kareyes/aether";
4
5  let destructiveChecked = $state(false);
6  let successChecked = $state(false);
7  let warningChecked = $state(false);
8</script>
9
10<div class="space-y-4">
11  <Checkbox
12    bind:checked={destructiveChecked}
13    variant="destructive"
14    label="Delete all data"
15    description="This action cannot be undone"
16  />
17  <Checkbox
18    bind:checked={successChecked}
19    variant="success"
20    label="Mark as completed"
21    description="This will mark the task as done"
22  />
23  <Checkbox
24    bind:checked={warningChecked}
25    variant="warning"
26    label="Proceed with caution"
27    description="This action requires attention"
28  />
29</div>

Line Through Feature

This text gets crossed out when checked


Code Svelte
1
2<script lang="ts">
3  import { Checkbox } from "@kareyes/aether";
4
5  let lineThroughChecked = $state(true);
6</script>
7
8<Checkbox
9  bind:checked={lineThroughChecked}
10  lineThrough={true}
11  label="Completed task with line-through"
12  description="This text gets crossed out when checked"
13/>

Indeterminate State

This checkbox is in an indeterminate state


Code Svelte
1
2<script lang="ts">
3  import { Checkbox } from "@kareyes/aether";
4
5  let indeterminateState = $state(false);
6</script>
7
8<Checkbox
9  bind:indeterminate={indeterminateState}
10  label="Partially selected"
11  description="This checkbox is in an indeterminate state"
12/>

Todo List Example

Completed: 2 / 5

Code Svelte
1
2<script lang="ts">
3  import { Checkbox } from "@kareyes/aether";
4
5  let todos = $state([
6    { id: 1, text: "Complete project setup", completed: true },
7    { id: 2, text: "Design components", completed: true },
8    { id: 3, text: "Implement checkbox variants", completed: false },
9    { id: 4, text: "Write documentation", completed: false },
10    { id: 5, text: "Test in different browsers", completed: false },
11  ]);
12</script>
13
14<div class="space-y-3 bg-card p-6 rounded-lg border">
15  {#each todos as todo (todo.id)}
16    <Checkbox
17      bind:checked={todo.completed}
18      label={todo.text}
19      lineThrough={true}
20      size="default"
21      class="w-full"
22    />
23  {/each}
24</div>
25
26<div class="text-sm text-muted-foreground">
27  Completed: {todos.filter(t => t.completed).length} / {todos.length}
28</div>

Error States

This checkbox must be checked

Invalid selection detected


Code Svelte
1
2<script lang="ts">
3  import { Checkbox } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7  <Checkbox
8    error={true}
9    label="Checkbox with Error"
10    description="This checkbox must be checked"
11    onError={(err) => console.log('Error state:', err)}
12  />
13  <Checkbox
14    variant="destructive"
15    error={true}
16    checked={true}
17    label="Error with Destructive Variant"
18    description="Invalid selection detected"
19  />
20  <Checkbox
21    size="lg"
22    error={true}
23    label="Large Error Checkbox"
24  />
25</div>

With Field Component

Field component provides structured labels, descriptions, and error handling

Single Checkbox with Field

Please review and accept our policies

With Validation

Multiple Checkboxes with Field.Set

Email Preferences

Choose which emails you'd like to receive

Receive notifications about account activity

Get updates about new products and features

Stay informed about product improvements


Code Svelte
1
2<script lang="ts">
3  import { Checkbox, Field, FieldPrimitives } from "@kareyes/aether";
4
5  let withLabelChecked = $state(false);
6  let basicChecked = $state(false);
7  let withDescriptionChecked = $state(false);
8  let successChecked = $state(false);
9</script>
10
11<!-- Single Checkbox with Field -->
12<Field
13  label="Agreements"
14  description="Please review and accept our policies"
15  required
16>
17  <Checkbox
18    label="I accept the terms and conditions"
19    bind:checked={withLabelChecked}
20  />
21</Field>
22
23<!-- With Validation -->
24<Field
25  label="Privacy Policy"
26  description="You must accept to continue"
27  required
28  error={!basicChecked ? "Please accept the privacy policy" : undefined}
29>
30  <Checkbox
31    label="I accept the privacy policy"
32    bind:checked={basicChecked}
33    error={!basicChecked}
34  />
35</Field>
36
37<!-- Multiple Checkboxes with FieldPrimitives.Set -->
38<FieldPrimitives.Set>
39  <FieldPrimitives.Legend>Email Preferences</FieldPrimitives.Legend>
40  <FieldPrimitives.Description>Choose which emails you'd like to receive</FieldPrimitives.Description>
41  <FieldPrimitives.Separator />
42  <FieldPrimitives.Group class="gap-4">
43    <Checkbox label="Notifications" variant="default" bind:checked={withDescriptionChecked} />
44    <Checkbox label="Marketing Emails" variant="default" checked={false} />
45    <Checkbox label="Product Updates" variant="success" bind:checked={successChecked} />
46  </FieldPrimitives.Group>
47</FieldPrimitives.Set>

Disabled States

This checkbox is disabled

This checkbox is disabled and checked


Code Svelte
1
2<script lang="ts">
3  import { Checkbox } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7  <Checkbox
8    checked={false}
9    disabled
10    label="Disabled unchecked"
11    description="This checkbox is disabled"
12  />
13  <Checkbox
14    checked={true}
15    disabled
16    label="Disabled checked"
17    description="This checkbox is disabled and checked"
18  />
19</div>