A control that allows the user to toggle between checked and not checked.
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
export function CheckboxDemo() {
return (
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Whether the checkbox is checked. |
| defaultChecked | boolean | - | Whether the checkbox is checked by default. |
| onCheckedChange | function | - | Event handler called when the checked state changes. |
| disabled | boolean | false | Whether the checkbox is disabled. |