Component
Checkbox
Accessible checkbox with custom styling, focus states. Built on top of Radix UI primitives.
Installation
Usage
Default
Default checkbox behavior.
1<CheckboxComponent />With Label
Can be paired with a label. Though checkout Checkbox Label.
1<div className="flex items-center space-x-2">
2 <CheckboxComponent id="terms" />
3 <label htmlFor="terms" className="text-sm text-white/80">
4 Accept terms and conditions
5 </label>
6</div>Disabled State
Non-interactive state for read-only or unavailable options.
1<CheckboxComponent disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Utility classes for further tweaking appearance, spacing, or layout. |
| ...props | React.ComponentProps<typeof CheckboxPrimitive.Root> | — | All props from Radix UI CheckboxPrimitive.Root including checked, disabled, onCheckedChange, etc. |