Skip to content
Site volume
Colourway

Components

Tick

A round checkbox for task lists, with an optional running number inside.

  • Experimental
  • Reading layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/tick
On this page

Tick is a native checkbox drawn for task lists: a 34 px circle in a 3 px ink ring (or a 32 px square) with an optional running number inside. Ticked, it turns into an ink disc with a paper check, so the state reads without colour. The whole row is the target. A completion stamp, when a task wants one, is the print kit's Stamp.

Example#

Look of this example
Live render of examples/tick/basic.tsx

Usage#

Use a tick for task lists: steps in a project, items in a checklist. It is a native checkbox drawn as a 34 px ring, with an optional running number inside, so it reads as a list of jobs rather than form options.

  • Numbered steps. number prints the step's position; a ticked step turns into an ink disc with a paper check, so done reads without colour.
  • Square. shape="square" draws a 32 px square for dense lists.
  • Completion stamps are the print kit's Stamp, placed beside the list, never inside the tick.
  • Choices in a form are a Checkbox or CheckboxGroup; a tick is for work being done.

Anatomy#

The parts of examples/tick/basic.tsx, numbered:
  1. Facedata-mk-part="face"
  2. Labeldata-mk-part="label"

Volume#

Reading layer: identical at every volume.

  • Quiet

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

  • Studio

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

  • Press

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

  • Rave

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

Content#

  • Each task starts with a verb and fits one line: "Call Sam Okafor".
  • Numbers only when the order matters.
  • Done tasks stay in the list, ticked; deleting them hides the progress.

Do and don't#

Do

Verbs say what to do.

Don't

Nouns leave the job unclear.

A task list is a list of actions. A verb first tells the reader what done looks like.

Accessibility#

  • A native checkbox: Tab reaches it, Space ticks it, and the visible label names it.
  • The check draws in 220 ms; reduced motion shows it at once.
  • The ring is the focus host: the ring outside it is 2 px in the focus ink.
KeysWhat happens
TabMoves to the tick
SpaceTicks or unticks it

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

TextSurfaceRoleBoneNight
--mk-text--mk-surfaceuinot in this looknot in this look

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

Props#

PropTypeDefaultDescription
labelReactNodenoneThe visible label (the task). Pass `aria-label` instead only where the row already shows the words.
numbernumbernoneA running number printed in the circle while unchecked.
shape"circle" | "square"none
classNamestringnoneLands on the row.
styleCSSPropertiesnone

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

Tokens#

System tokens (20)

Its own properties (5)

  • --mk-tick-leading
  • --mk-tick-number
  • --mk-tick-number-2
  • --mk-tick-radius
  • --mk-tick-size

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

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • MinorreactBreadcrumbs, Pagination (with paginationRange), Count, ProgressBar (bar, segments, indeterminate), Avatar and AvatarGroup, Tick, EmptyState, Kbd, Skeleton and Loader. Read the whole entry