Checkbox

Open in GitHub

Open in Figma

An accessible control for toggling between checked and unchecked states. Built on native HTML checkbox.

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Enable notifications

You can enable or disable notifications at any time.

1
---
2
import { Checkbox } from '@bejamas/ui/components/checkbox';
3
import { Label } from '@bejamas/ui/components/label';
4
---
5

6
<div class="flex flex-col gap-6 not-content">
7
<div class="flex items-center gap-3">
8
  <Checkbox id="terms" />
9
  <Label for="terms">Accept terms and conditions</Label>
10
</div>
11

12
<div class="flex items-start gap-3">
13
  <Checkbox id="terms-2" defaultChecked />
14
  <div class="grid gap-2">
15
    <Label for="terms-2">Accept terms and conditions</Label>
16
    <p class="text-muted-foreground text-sm">
17
      By clicking this checkbox, you agree to the terms and conditions.
18
    </p>
19
  </div>
20
</div>
21

22
<div class="flex items-center gap-3">
23
  <Checkbox id="toggle" disabled />
24
  <Label for="toggle">Enable notifications</Label>
25
</div>
26

27
<Label
28
  class="hover:bg-accent/5 border-border flex items-start gap-3 rounded-lg border p-3 has-[:checked]:border-blue-600 has-[:checked]:bg-blue-50 dark:has-[:checked]:border-blue-900 dark:has-[:checked]:bg-blue-950"
29
>
30
  <Checkbox
31
    id="toggle-2"
32
    defaultChecked
33
    class="checked:border-blue-600 checked:bg-blue-600 dark:checked:border-blue-700 dark:checked:bg-blue-700"
34
  />
35
  <div class="grid gap-1.5 font-normal">
36
    <p class="text-sm leading-none font-medium">Enable notifications</p>
37
    <p class="text-muted-foreground text-sm">
38
      You can enable or disable notifications at any time.
39
    </p>
40
  </div>
41
</Label>
42
</div>

Installation

bunx bejamas add checkbox

npx bejamas add checkbox

pnpm dlx bejamas add checkbox

yarn dlx bejamas add checkbox

Usage

1
---
2
import { Checkbox } from '@bejamas/ui/components/checkbox';
3
import { Label } from '@bejamas/ui/components/label';
4
---
5

6
<div class="flex items-center gap-3">
7
  <Checkbox id="terms" />
8
  <Label for="terms">Accept terms and conditions</Label>
9
</div>