Skip to content
Site volume
Colourway

Components

Disclosure

Native details and summary, and the FAQ built on them, with FAQPage JSON-LD.

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

Example#

Look of this example

How long does a site take?

Two to four weeks.

Do I own the code?

Yes, from day one.
Live render of examples/disclosure/basic.tsx

Usage#

Use a disclosure to hide detail that most readers can skip: an FAQ answer, the fine print of a plan, the long version of a step. It is the native details element, so it works without JavaScript and the browser's find-in-page opens a matching item.

  • Faq builds a list of disclosures from items, all closed at load; several may be open at once. faqJsonLd(items) returns the FAQPage JSON-LD for the page's head.
  • Exclusive groups. Give disclosures the same name and opening one closes the others.
  • Headings. headingLevel wraps the summary in a heading, so the questions appear in the page outline.
  • Never hide what everyone needs, such as a price, a deadline or an error.

Anatomy#

How long does a site take?

Two to four weeks.

Do I own the code?

Yes, from day one.
The parts of examples/disclosure/basic.tsx, numbered:
  1. SummaryThe question, 56 px tall, row-title type..mk-disclosure-summary
  2. GlyphA play triangle that turns 90° when open..mk-disclosure-glyph

Volume#

Reading layer: identical at every volume.

  • Quiet

    How long does a site take?

    Two to four weeks.

    Do I own the code?

    Yes, from day one.

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

  • Studio

    How long does a site take?

    Two to four weeks.

    Do I own the code?

    Yes, from day one.

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

  • Press

    How long does a site take?

    Two to four weeks.

    Do I own the code?

    Yes, from day one.

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

  • Rave

    How long does a site take?

    Two to four weeks.

    Do I own the code?

    Yes, from day one.

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

Content#

  • Write summaries as the question a reader would ask: "Do I own the code?"
  • Answer in the first sentence, then explain: "Yes, from day one. The repository is yours…"
  • Keep each answer short enough to read without scrolling; link out for more.

Do and don't#

Do

How long does a site take?

Two to four weeks.

Do I own the code?

Yes, from day one.

Questions people actually ask.

Don't

More info (open for pricing)

A vague summary hiding a price.

A summary is a promise of what is inside. Prices and other things everyone needs stay out in the open.

Accessibility#

  • Native: Enter or Space opens the summary, find-in-page opens matching items, and it all works without JavaScript.
  • The play glyph turns 90° on open; the height animates where the browser can and is instant under reduced motion.
KeysWhat happens
TabMoves to the summary row
EnterorSpaceOpens or closes the item

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

TextSurfaceRoleBoneNight
--mk-ink--mk-paperbody 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paperbody-ui 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paperlong 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paper-sunkenbody 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-sunkenbody-ui 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-sunkenlong 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-platebody 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink--mk-paper-platebody-ui 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink--mk-paper-platelong 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink--mk-paper-hoverbody-ui 17.99:1 · Lc 103.4, passes 16.94:1 · Lc 96.5, passes
--mk-ink--mk-paper-sunken-hoverbody-ui 16.63:1 · Lc 98.0, passes 16.46:1 · Lc 96.3, passes
--mk-ink--mk-paper-plate-hoverbody-ui 16.90:1 · Lc 99.1, passes 16.02:1 · Lc 96.0, passes

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

Props#

PropTypeDefaultDescription
summary requiredReactNodenoneThe always-visible row.
defaultOpenbooleannone
namestringnoneAn exclusive group: opening one closes the others with the same name.
headingLevel2 | 3 | 4noneWraps the summary text in `h2` to `h4`.
children requiredReactNodenone

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

Tokens#

System tokens (21)

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