Form

Checkbox

View in Figma

Small rounded square that is empty when unchecked and fills with the accent color and a white checkmark when checked, dimming the whole control when disabled.

Overview

Small rounded square that is empty when unchecked and fills with the accent color and a white checkmark when checked, dimming the whole control when disabled.

Variant
Unchecked

The unchecked variant.

Variants and states

enableddisabled
unchecked
checked

Anatomy

Checkbox
Checkbox label
  1. 1Container  required  24pt hit target that centers the visual box.
  2. 2Box  required  20pt rounded square. Border only when unchecked, accent fill when checked.
  3. 3Check  optional  White checkmark shown only in the checked state.
  4. 4Label  optional  Optional trailing text. Not part of the Figma component, added by the consumer alongside the box.

Measurements

Checkbox label
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Box
Box corner radius
radiusXs
6pt
Box border width, unchecked
strokeXl
2pt
Box border color, unchecked
colorBorderSecondary
#D3D5D8
Box fill, checked
colorContentAccent
#4B56C7
Check
Checkmark stroke width
strokeXl
2pt
Checkmark color, checked
colorContentOnDark
#FFFFFF
Label
Gap from box to label
spacingGapPositiveXl
12pt
Label typography
body.md.regular
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 400 · typographyFontWeightRegularTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText
Label color
colorContentPrimary
#0C1828

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
isSelectedvariantfalse, true
isDisabledvariantfalse, true

Accessibility

The visible box is 20pt, but the tap target should be at least 44 by 44pt, so add surrounding padding. Associate the label with the control, expose the checked state, and never rely on the fill color alone.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.