Checkbox

Preview

Default, on: a 24 pt box inside a 44 pt 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. The box is 24 at radius 8 with a 2 stroke aligned inside.

The tick is a custom vector, 11 by 8, stroked at 2.5 with round ends.

Source: Checkbox, node 169:6573 of the Appetite UI Figma file, read on October 2, 2026.

Which states does Checkbox have?

Five: Default, Pressed, Focused, Error and Disabled, each crossed with off, on and mixed; the file has no Hover, so a pointer hover moves these specimens toward Pressed. While the finger is down an unchecked box strokes in brand, so the target confirms the touch before the value changes.

Focused is the focusRing/brand effect style, a 2 pt gap in the surface color and then a 2 pt ring in brand/base, drawn on the box. Error is for a required checkbox left empty: the stroke turns state/error/base-500 when off and the fill does when on or mixed.

Mixed shows a 10 wide bar for a parent that has some children selected. The empty box strokes in bg/sub-200, so it stays visible on a white screen, and Disabled drops the stroke and paints bg/soft-100 whichever way it is set.

15 variants, State by Active, no holes. Source: the Checkbox set of the Appetite UI Figma file, read on October 2, 2026.

Label

The label is its own component: Align puts it on either side, and the description can be switched off. Each row is one checkbox, so click the text or the box.

The row is 340 by 48: the 44 wide Checkbox, 16 of gap, then 280 of text. The height comes from the text, 28 for the title at 18/28 Semi Bold plus 20 for the description at 14/20.

Switching Show Description off takes the row to 44, the height of the box frame. Align swaps the order of the two children.

Properties

Two component sets: Checkbox, the box, and _Checkbox Label, the row that carries it.

Checkbox carries no text. _Checkbox Label is two variants of Align and holds Label, Description and Show Description.

The underscore keeps it out of the Assets panel, so copy the row from the Checkbox page of the file.

Tokens

Every value the checkbox reads, resolved through its aliases to the primitive underneath.

brand/pressed is the pressed fill, darker than brand/base in both modes: #193CB8 in Light and #155DFC in Dark. icon/on-color is white in both modes, so the tick stays white on a dark screen.

How does Checkbox differ on iOS and Material 3?

iOS has no checkbox control, and Material 3 has one with a 48 by 48 target. Appetite UI Checkbox is one component with a 44 pt target for both.

The 44 frame meets the iOS minimum touch target of 44 pt, set by platform/min-touch-target in the Platform collection. On Android, where the minimum is 48 dp, add 4 dp of hit area in code.

Guidelines

Checkbox is for zero or more. For one setting that is on or off, use Toggle: a checkbox belongs in a form that submits, and a toggle applies the moment it moves.

Make the whole label row tappable in code.