Flint Components
Checkbox
Checkboxes let people pick any number of options from a list, or turn one option on before they submit.
Component tokens
Every value checkbox uses, on every platform. Colors point at semantic tokens, so they follow light and dark on their own. The focus ring is shared by every component.
| Token | CSS | Swift | Points at | Light | Dark |
|---|---|---|---|---|---|
checkbox.size | --checkbox-size | Flint.Component.checkboxSize | targetMin | 24px | 24px |
checkbox.radius | --checkbox-radius | Flint.Component.checkboxRadius | radius.xs | 4px | 4px |
checkbox.border | --checkbox-border | Flint.Component.checkboxBorder | semantic.border.control | #64748b | #6e7681 |
checkbox.checkedBg | --checkbox-checked-bg | Flint.Component.checkboxCheckedBg | semantic.action.primary | #1550a0 | #93c5fd |
checkbox.checkedFg | --checkbox-checked-fg | Flint.Component.checkboxCheckedFg | semantic.action.onPrimary | #ffffff | #0d1117 |
focus.ring.color | --focus-ring-color | Flint.Component.focusRingColor | semantic.action.focusRing | #1550a0 | #60a5fa |
focus.ring.width | --focus-ring-width | Flint.Component.focusRingWidth | 2 | 2px | 2px |
focus.ring.offset | --focus-ring-offset | Flint.Component.focusRingOffset | 2 | 2px | 2px |
Contrast
Measured on every build. See Contrast for every pairing.
| Pairing | Needs | Light | Dark |
|---|---|---|---|
| checkbox edge | 3:1 | 4.76:1 Pass | 3.77:1 Pass |
| checkbox checked fill | 3:1 | 7.82:1 Pass | 9.59:1 Pass |
| checkbox check mark | 3:1 | 7.82:1 Pass | 10.49:1 Pass |
| focus ring on page | 3:1 | 7.47:1 Pass | 7.44:1 Pass |
| focus ring on default | 3:1 | 7.82:1 Pass | 6.80:1 Pass |