Primitives
Checkbox
Sharp checkbox that fills with signal when checked.
● LIVE
"use client";import { Checkbox } from "@/registry/okibi/ui/checkbox";import { Label } from "@/registry/okibi/ui/label";export default function CheckboxDemo() { return ( <div className="flex items-center gap-2"> <Checkbox id="checkbox-demo-ice" defaultChecked /> <Label htmlFor="checkbox-demo-ice">Arm ICE</Label> </div> );}npx shadcn@latest add https://okibi.cndr.dev/r/checkbox.jsonInstallation
Install the theme first, then add the component:
npx shadcn@latest add https://okibi.cndr.dev/r/checkbox.jsonInstall the required dependencies:
npm install @radix-ui/react-checkbox lucide-reactCopy the source from the Code tab above into components/ui/checkbox.tsx. It uses the cn helper and the okibi theme tokens — install the theme first if you haven't.
Usage
import { Checkbox } from "@/components/ui/checkbox"
<Checkbox id="arm" defaultChecked />Examples
With description
Pair the box with a Label and a muted helper line for consent rows and settings toggles.
● LIVE
Auto-engage defenses on breach detection.
"use client";import { Checkbox } from "@/registry/okibi/ui/checkbox";import { Label } from "@/registry/okibi/ui/label";export default function CheckboxWithTextDemo() { return ( <div className="flex items-start gap-3"> <Checkbox id="checkbox-with-text-ice" defaultChecked /> <div className="space-y-1"> <Label htmlFor="checkbox-with-text-ice">Arm perimeter ICE</Label> <p className="text-xs text-muted-foreground"> Auto-engage defenses on breach detection. </p> </div> </div> );}Disabled
The native disabled attribute blocks interaction in both the checked and unchecked states.
● LIVE
"use client";import { Checkbox } from "@/registry/okibi/ui/checkbox";import { Label } from "@/registry/okibi/ui/label";export default function CheckboxDisabledDemo() { return ( <div className="space-y-3"> <div className="flex items-center gap-2"> <Checkbox id="checkbox-disabled-off" disabled /> <Label htmlFor="checkbox-disabled-off">Override lock</Label> </div> <div className="flex items-center gap-2"> <Checkbox id="checkbox-disabled-on" disabled defaultChecked /> <Label htmlFor="checkbox-disabled-on">Failsafe armed</Label> </div> </div> );}Accessibility
- Built on Radix
Checkbox.Root, so it exposesrole='checkbox'andaria-checked(including'mixed'for the indeterminate state) for free. - Drives the check / minus glyph off
data-state(checked,unchecked,indeterminate) — Space toggles it natively. aria-invalid='true'flips the box to the destructive keyline (border-destructive,ring-destructive) for error states.- Focus shows the 2px signal ring:
focus-visible:ring-2 ring-ringwithring-offset-2. - Has no built-in text — always associate a
LabelviahtmlForpointing at the checkboxidso the click target and announcement are correct. - Disabled state is
disabled:opacity-60and removes pointer events; the glyph swap is instant (transition-none) per the motion spec.
Guidelines
Do
- Pair every checkbox with a
Label(matchinghtmlFor/id) so the whole row is clickable. - Use the indeterminate state for a parent that summarizes a partially-selected set of children.
- Wire
aria-invalidwhen a required checkbox (terms, consent) is left unchecked on submit.
Don't
- Don't use a checkbox for a single mutually-exclusive choice — reach for
RadioGrouporSwitch. - Don't ship a bare checkbox with no associated label; an adjacent
spanis not an accessible name. - Don't add motion to the glyph — the instant swap is intentional HUD behavior.