Checkbox
Checkbox is a form control for selecting one option, several, or none.
Preview
Default, active. The box is 28px inside a 44px target, so the thing you can hit is bigger than the thing you can see. Click it.
The 44 frame is the target and none of it is drawn. Inside it sit two rectangles: a 28 at radius 10 and, when the box is unchecked, a 24 at radius 8 in bg/white-0 centred on top. The 2px ring is what is left of the bigger one. The component has no auto layout, so the parts hold fixed coordinates, and the tick is a 16 icon whose path measures 10.67 by 7.33.
State
Three states across two active values. Pressed is not a darker shade: an unchecked box fills with brand while the finger is down, so the target confirms the touch before the value changes.
Six variants, State by Active, no holes. Pressed on an unchecked box fills the ring with brand/base, the same value a checked box carries, so for the length of a touch only the tick tells the two apart. Disabled unchecked drops the white square, so where every other unchecked state reads as a ring, that one is a solid grey block. A disabled control is not meant to read as clearly as a live one.
Label
The label is its own component, so the box stays a box. Align puts it on either side, and the description can be switched off. All three tick.
The row is 340 by 48: a 44 control, 16 of gap, 280 of text. The height comes from the text, not the control, 28 for the title at 18/28 Semi Bold plus 20 for the description at 14/20, so switching Show Description off takes the row to 28 and leaves the 44 box overhanging it. Align swaps the order of the two children, it does not flip a layout property, so the gap stays inside either way.
Properties
Two sets: the box, and the label that carries it.
Two component sets, not one. Checkbox is six variants of State by Active and carries no text. _Checkbox Label is two variants of Align and holds every property a form needs: Label, Description and Show Description. The underscore marks it private, so it stays out of the Assets panel; you reach it by placing a Checkbox and switching to the label variant. The whole row is the tap target, per the label component's description.
Tokens
Every value the checkbox reads, resolved through its aliases to the primitive underneath.
Every one of these themes. brand/dark is the pressed fill and it goes lighter, not darker, #193CB8 to #82BFFF, because pressed has to step away from the base in whichever direction has room. The tick is fg/white-0, not the static white the name suggests, so in dark mode a checked box is a near black tick on a lighter blue. Nothing on this component is a raw primitive.
Guidelines
Put the consequence in the description. The title says what happens, the description says what it costs.
Do not ship a checked box the user cannot uncheck. A choice with one option is not a choice, it is a sentence in the terms.
Checkbox is for zero or more; for one setting that is either on or off, reach for Toggle. The line between them is when the change lands: a checkbox belongs in a form that submits, a toggle applies the moment it moves. The 44 target is already drawn into this component, so the only hit area left to add in code is the label row, which the file expects to be tappable end to end.