Gesso
Components

Checkbox

A 20px check control on the primary, with a 44px coarse hit area.

A Radix checkbox ported from Atlas. Phosphor Check at weight="bold". Atlas filled the checked state with --input (ICS remaps that slot to primary; dry --input is the field border), so the remap is bg-primary. Pair it with Field — do not ship a floating box without a label.

The label and helper are the readable target; the box stays 20px.

  • :focus-visible ring, never a bare :focus. outline-hidden for forced-colors.
  • Coarse pointers get a 44px hit slop around the 20px visual.
  • The check scales in under motion-safe; reduced-motion users get the settled state.

Install

shadcn add @gesso/checkbox

On this page