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

import Checkbox from "@/components/ui/checkbox/Checkbox.astro";
import Label from "@/components/ui/label/Label.astro";

Usage

import { Checkbox } from "@/components/ui/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