Skip to content
Site volume
Colourway

Components

Checkbox

Native checkboxes drawn as a 24 px box, and groups as a list, toggle keys or cards.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/checkbox
On this page

Example#

Look of this example
What do you need? (optional)
Live render of examples/checkbox/basic.tsx

Usage#

Use a checkbox for a choice that takes effect when a form is sent: agree to terms, pick the services you need. Use a Switch for a setting that applies at once.

  • One or many. A single Checkbox is a yes or no; a CheckboxGroup lets people pick any number from a list, under one legend.
  • Group appearance. list (default) for long options, keys for short ones as toggle keys that wrap, cards for options that need a title and a description.
  • Indeterminate shows a bar when some, not all, of a nested set are picked.
  • The whole row is the target, at least 44 px tall on touch screens, so the 24 px box is never the only place to tap.

Anatomy#

The parts of examples/checkbox/anatomy.tsx, numbered:
  1. Box24 px, 2 px rule; checked takes the selected face and a check..mk-checkbox-box
  2. LabelBody UI type; tapping it toggles the box..mk-checkbox-label
  3. DescriptionOptional detail in the meta role..mk-checkbox-description

Volume#

Reading layer: identical at every volume.

  • Quiet

    What do you need? (optional)

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    What do you need? (optional)

    The site default. Art on its own plates, one display moment per view.

  • Press

    What do you need? (optional)

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    What do you need? (optional)

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Labels state the choice positively: "Send me the weekly digest", not "Don't not send me emails".
  • Legends ask the question once; options do not repeat it.
  • Terms and consent link the document and name it: "I agree to the [privacy policy]".

Do and don't#

Do

A setting that saves at once is a switch.

Don't

A checkbox outside a form leaves people looking for Save.

A checkbox promises the choice is sent later with a form. When a setting takes effect immediately, the switch says so.

Accessibility#

  • Each box is native: Space toggles it and the whole label row is the target (44 px tall on touch screens).
  • Checked boxes show a check on the selected face; selected keys and cards add a heavier ink rule and a check, never colour alone.
  • indeterminate sets the native mixed state, so it needs a client caller.
KeysWhat happens
TabMoves focus to the box (each box is its own stop)
SpaceChecks or clears the box

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-ink-rule--mk-paperui 3.27:1 · Lc 56.5, passes 3.65:1 · Lc 25.6, passes
--mk-ink-rule--mk-paper-sunkenui 3.01:1 · Lc 51.2, passes 3.49:1 · Lc 25.2, passes
--mk-ink-rule--mk-paper-plateui 3.65:1 · Lc 64.1, passes 3.38:1 · Lc 24.8, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
label requiredReactNodenoneRequired: the visible label.
descriptionReactNodenone
indeterminatebooleannoneThe mixed state: a 3 px bar. It sets the IDL `indeterminate` through a ref, so it needs a client caller.
classNamestringnoneLands on the row (`label.mk-checkbox`).
styleCSSPropertiesnoneLands on the row.

Plus 305 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from CheckboxProps in packages/overprint-react/src/reading/checkbox/checkbox.tsx.

Tokens#

System tokens (40)

Its own properties (2)

  • --mk-checkbox-box
  • --mk-checkbox-key-edge

Scanned from its CSS at build and checked against its registry entry; 21 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.