Checkbox
shadcn/ui checkbox on DESIGN.md tokens. 16px box, border-input edge, 4px radius; checked fills primary. The table's bulk-select column uses it, so a row cell that holds one loses its right padding.
import { Checkbox } from "@stocklots/ui-components/components/checkbox";
<Checkbox id="terms" onCheckedChange={(v) => setAgreed(v === true)} />States
Unchecked, checked, indeterminate, disabled, disabled checked, invalid (with its message).
Motion
The Button's strategy: hover lifts the box to 1.1, a press squashes it to 0.9, and a state change bounces it (1 → 1.2 → 0.92 → 1 over 320ms) while the glyph pops in with the success check's overshoot and the check draws its stroke; uncheck shrinks the glyph out. Walk the states with the button or click the box.
With label
Label to the right, one line, the whole row is the target.
Choice cards
FieldLabel wraps a Field; the card's border and fill key off data-state=checked on the checkbox inside.