Checkbox
A control that allows the user to toggle between checked and unchecked states.
1<Checkbox />#Installation
1bunx barefoot add checkbox#Usage
1import { Checkbox } from '@/components/ui/checkbox'23export default function Page() {4 return <Checkbox />5}#Examples
#Checked State
1<Checkbox />2<Checkbox checked />#Disabled
1<Checkbox disabled />2<Checkbox checked disabled />#State Binding
Status: Unchecked
1import { createSignal } from '@barefootjs/dom'23const [checked, setChecked] = createSignal(false)45<Checkbox6 checked={checked()}7 onCheckedChange={setChecked}8/>9<p>{checked() ? 'Checked' : 'Unchecked'}</p>#With Label
Terms: Not accepted
1<label class="flex items-center gap-2">2 <Checkbox checked={accepted()} onCheckedChange={setAccepted} />3 <span>Accept terms and conditions</span>4</label>#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | The controlled checked state of the checkbox. |
| disabled | boolean | false | Whether the checkbox is disabled. |
| onCheckedChange | (checked: boolean) => void | - | Event handler called when the checked state changes. |