Checkbox - Show Label × Show Description: No/No · Yes/No · Yes/Yes - the fourth pairing is not drawn
Checkbox Group - none: six rows in a column at a 12px gap, 219 wide
Using the Checkbox
Why a hundred and twenty and not a hundred and sixty?
Because Show Description only exists where Show Label is Yes. Six axes multiply out to a hundred and sixty, but a description with no label above it is not a shape anyone needs, so those forty are left out of the container rather than drawn and quietly broken.
What is the Box type for?
A selectable card: the whole row gets a 1px border at radius 8 with 10px of padding, and tints to base.primary at 5% once it is chosen. It is the shape you want for a delivery option or a plan, where the target should be the row and not the 16px square.
Why does Pressed exist when shadcn has no such state?
Because a designer laying out a flow needs to show the moment of the tap, and the file draws it as the control at 60% opacity. It is a design-time state, not something you wire up. Disabled uses the same mechanism at 50%, with the label at 70%.
Control Placement End - when would I use that?
A settings row, where the label reads as the sentence and the control sits at the far edge of the form. The file keeps the same 8px gap in both directions and only reverses the child order, so nothing about the row's height or alignment changes.
Is the component tokenised?
Yes. Fills, strokes and the Box wrapper's radius are all bound to the semantic set, so a Dark theme switch carries the whole component. Two things stay as raw hex: the 4px radius on the 16px control, because no token holds that value, and the focus ring, because the same shape already binds strokeColor to base.input or base.primary for its 1px edge and Penpot allows one colour token per attribute. The ring's hex matches base.ring exactly, it just cannot say so.