Checkbox

Accept terms and conditions

Accept terms and conditions

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

Enable notifications

Enable notifications

You can enable or disable notifications at any time.

---
import { Checkbox } from '@bejamas/ui/components/checkbox';
import { Label } from '@bejamas/ui/components/label';
---

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

<div class="flex items-start gap-3">
  <Checkbox id="terms-2" defaultChecked />
  <div class="grid gap-2">
    <Label for="terms-2">Accept terms and conditions</Label>
    <p class="text-muted-foreground text-sm">
      By clicking this checkbox, you agree to the terms and conditions.
    </p>
  </div>
</div>

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

<Label
  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"
>
  <Checkbox
    id="toggle-2"
    defaultChecked
    class="checked:border-blue-600 checked:bg-blue-600 dark:checked:border-blue-700 dark:checked:bg-blue-700"
  />
  <div class="grid gap-1.5 font-normal">
    <p class="text-sm leading-none font-medium">Enable notifications</p>
    <p class="text-muted-foreground text-sm">
      You can enable or disable notifications at any time.
    </p>
  </div>
</Label>
</div>

View CodeHide Code

Installation

bun

bunx bejamas add checkbox

npm

npx bejamas add checkbox

pnpm

pnpm dlx bejamas add checkbox

yarn

yarn dlx bejamas add checkbox

Usage

---
import { Checkbox } from '@bejamas/ui/components/checkbox';
import { Label } from '@bejamas/ui/components/label';
---

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