Checkbox

A checkbox component built on Radix UI primitives for boolean input.

Import

Code
 
import { Checkbox } from "zudoku/ui/Checkbox";

Basic Usage

Code
 
<Checkbox />

With Label

Code
 
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Checked State

Code
 
<div className="flex items-center space-x-2">
  <Checkbox id="terms2" defaultChecked />
  <Label htmlFor="terms2">Accept terms and conditions</Label>
</div>

Disabled State

Code
 
<div className="flex items-center space-x-2">
  <Checkbox id="terms3" disabled />
  <Label htmlFor="terms3">Accept terms and conditions</Label>
</div>

Features

• Accessibility: Full keyboard navigation and screen reader support
• Indeterminate State: Supports indeterminate state for partial selections
• Controlled/Uncontrolled: Can be used with or without state management
• Customizable: Easy to style with className prop