Loading...
Loading...
> A checkbox component for toggling boolean values.
1import { Checkbox } from "@/components/ui/checkbox"
1<div className="flex items-center gap-2">2 <Checkbox id="terms" />3 <Label htmlFor="terms">[ACCEPT TERMS AND CONDITIONS]:</Label>4</div>
1<Checkbox />
1<Checkbox defaultChecked />
1<div className="flex items-center gap-2">2 <Checkbox id="newsletter" />3 <Label htmlFor="newsletter">[SUBSCRIBE TO NEWSLETTER]:</Label>4</div>
1<Checkbox disabled />
1<Checkbox disabled defaultChecked />
1<div className="grid gap-2">2 <div className="flex items-center gap-2">3 <Checkbox id="option1" defaultChecked />4 <Label htmlFor="option1">[OPTION 1]:</Label>5 </div>6 <div className="flex items-center gap-2">7 <Checkbox id="option2" />8 <Label htmlFor="option2">[OPTION 2]:</Label>9 </div>10 <div className="flex items-center gap-2">11 <Checkbox id="option3" />12 <Label htmlFor="option3">[OPTION 3]:</Label>13 </div>14</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Controlled checked state. |
| defaultChecked | boolean | - | The default checked state for uncontrolled usage. |
| onCheckedChange | (checked: boolean) => void | - | Event handler called when the checked state changes. |
| disabled | boolean | false | Disable the checkbox. |
| required | boolean | false | Mark the checkbox as required. |
✓ Use Checkbox when:
✗ Don't use when:
Best Practices: