Checkbox

Copyimport { Checkbox } from "@/components/ui/checkbox";
 
// With label
<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <label
    htmlFor="terms"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </label>
</div>
 
// Controlled
const [checked, setChecked] = useState(false);
<Checkbox
  checked={checked}
  onCheckedChange={setChecked}
/>
 
// Indeterminate (e.g. select-all pattern)
<Checkbox checked="indeterminate" />
 
// In a form
<Checkbox id="marketing" name="marketing" value="yes" />

Copy# Mint — Checkbox Specs
 
## Component
- name: checkbox
- file: registry/mint/checkbox.tsx
- installs to: components/ui/checkbox.tsx
- dependencies: radix-ui, lucide-react
 
## What is it
A binary toggle input for forms and settings. Supports three states:
unchecked, checked, and indeterminate (for select-all patterns). Uses
Radix UI's Checkbox primitive for accessible keyboard and screen reader
support. Renders a Check icon (stroke-[3]) when checked.
 
## Visual identity
Small (size-4 / 16px), square with rounded-[4px] corners — not fully
rounded. Thin border (border-input) in rest state, filled primary on
checked. Clean and dense — designed to sit in lists and forms without
visual weight.
 
## Design tokens
--input: oklch(0.88 0.04 155 / 60%)      — unchecked border
--primary: oklch(0.5 0.14 155)           — checked background + border
--primary-foreground: oklch(1 0 0)       — check icon color
--ring: oklch(0.5 0.14 155)              — focus ring
--destructive: oklch(0.55 0.25 15)       — aria-invalid border
 
## Dark theme
--input: oklch(0.32 0.05 155 / 40%)
--primary: oklch(0.62 0.15 155)
--primary-foreground: oklch(0.1 0 0)
 
## States
- unchecked:      border-input, transparent background
- checked:        bg-primary text-primary-foreground border-primary
- indeterminate:  bg-primary text-primary-foreground border-primary
- focus-visible:  border-ring + ring-ring/50 + ring-[3px]
- disabled:       opacity-50 cursor-not-allowed (via peer, label follows)
- aria-invalid:   border-destructive + ring-destructive/20
 
## Label pattern
Always use a <label> with matching htmlFor. Apply peer-disabled classes
on the label to visually sync disabled state:
  className="peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 
## Conventions
- Always pair with a <label htmlFor="..."> for accessibility
- Use mt-0.5 on Checkbox when pairing with multi-line description text
- For select-all: set checked="indeterminate" and handle onCheckedChange
- In React Hook Form: use <Controller> with onCheckedChange={field.onChange}
- Do not use Checkbox for mutually exclusive choices — use RadioGroup instead