Checkbox

Composition preview

Try Checkbox alongside its related selection components. These examples keep all actions local.

Usage

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

<>
<div className="flex items-center gap-2">
  <Checkbox id="reviewed" name="reviewed" />
  <Label htmlFor="reviewed">Reviewed</Label>
</div>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

checked/defaultChecked, onCheckedChange, disabled, name; checked may be indeterminate

Usage & accessibility

Use NativeCheckbox composition when checked CSS selectors, native change events, form behavior or input refs must be retained.

Implementation contract

src/components/ui/checkbox.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.