Skip to content
Site volume
Colourway

Components

Radio

Native radios drawn as a 24 px ring, and groups as a list, toggle keys or cards with line badges.

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

Example#

Look of this example
Budget (optional)
Live render of examples/radio/basic.tsx

Usage#

Use a radio group to pick exactly one option from two to about six, all in view. Every option is visible, so people can compare before they pick.

  • Appearance. list (default) for longer labels, keys for short ones as toggle keys that wrap into an even grid on phones, cards for options with a title, a description and an optional line badge, such as a service tier.
  • Always a default? Pick one only when it is the safe, common answer; otherwise leave the group empty and mark it required.
  • More options than fit, use Select. To switch a view rather than answer a question, use SegmentedControl.

Anatomy#

The parts of examples/radio/anatomy.tsx, numbered:
  1. Ring24 px, 2 px rule; selected adds a 10 px dot..mk-radio-ring
  2. LabelThe whole row is the target..mk-radio-label
  3. DescriptionOptional detail in the meta role..mk-radio-description

Volume#

Reading layer: identical at every volume.

  • Quiet

    Budget (optional)

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

  • Studio

    Budget (optional)

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

  • Press

    Budget (optional)

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

  • Rave

    Budget (optional)

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

Content#

  • The legend asks the question; options answer it in parallel form: "Under $5k", "$5k to $15k", "More".
  • Ranges never overlap and never leave a gap.
  • Order options logically: small to large, early to late.

Do and don't#

Do

Start (optional)

Distinct, ordered answers.

Don't

Start (optional)

Overlapping answers: is this month soon?

Each option has to mean one thing. When two answers could both be true, people stall or guess.

Accessibility#

  • Native radios: Tab enters the group on the checked radio, arrows move and select.
  • The selected radio shows a dot on the selected face; selected keys and cards add an ink rule and a check.
KeysWhat happens
TabMoves into the group, onto the checked radio
Arrow keysMove to the next or previous radio and select it
SpaceSelects the focused radio

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
classNamestringnoneLands on the row (`label.mk-radio`).
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 RadioProps in packages/overprint-react/src/reading/radio/radio.tsx.

Tokens#

System tokens (41)

Its own properties (2)

  • --mk-radio-key-edge
  • --mk-radio-ring

Scanned from its CSS at build and checked against its registry entry; 23 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.