Checkbox

Accept terms and conditions

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

Installation

npx bearnie add checkbox

Usage

import { Checkbox } from "@/components/bearnie/checkbox"

<Checkbox id="terms" />

Examples

Checked

Checked by default

<div class="flex items-center gap-2">
  <Checkbox id="checked" checked />
  <Label for="checked">Checked by default</Label>
</div>

Disabled

Disabled checkbox

<div class="flex items-center gap-2">
  <Checkbox id="disabled" disabled />
  <Label for="disabled" class="opacity-50">Disabled checkbox</Label>
</div>

With description

Marketing emails

Receive emails about new products and features.

<div class="flex items-start gap-2">
  <Checkbox id="emails" class="mt-1" />
  <div class="grid gap-1">
    <Label for="emails">Marketing emails</Label>
    <p class="text-sm text-muted-foreground">Receive emails about new products and features.</p>
  </div>
</div>

Anatomy

Checkbox - A single form input element

Props

Prop	Type	Default	Description
id	string	-	Element ID for label association
name	string	-	Form field name
checked	boolean	false	Default checked state
disabled	boolean	false	Disables the checkbox
required	boolean	false	Makes the field required
value	string	-	Form value when checked
class	string	-	Additional CSS classes