Atoms / Checkbox

Checkbox

<Checkbox />Stable

Tri-state checkbox (checked / unchecked / indeterminate) on Radix. Checked is a solid --primary fill; indeterminate is a soft --primary-subtle tint with a dash so a partial select-all reads differently from a full one. Hover, focus, disabled, and error (aria-invalid) states all resolve through tokens.

import { Checkbox } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Checked

Interaction

Label

<Checkbox defaultChecked />

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { Checkbox } from "@/components/upnext";


<Checkbox />

States

Hover any enabled box to see its hover token. Checked fills solid --primary; indeterminate uses the soft --primary-subtle tint + dash; error shifts the border + ring to --destructive.

<Checkbox />

Composition

Labels, a heading + body via TextBlock, an error that colors its text, a select-all group, and a multi-select Table built from our own Table primitive.

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

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.