Skip to content
Site volume
Colourway

Components

Form

A native form that validates like the site: quiet until it matters, literal messages, focus on the first failure.

Import from@maxgrits/overprint-react/form
On this page

Example#

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

Usage#

Use Form around any set of fields that is sent somewhere. It is a native form that takes over validation, timed so it helps without nagging: a field is checked when the form is sent and when someone leaves a field they typed in; an error clears the moment it is fixed.

  • On a failed send every failed field gets its message, focus moves to the first one, and with two or more errors an ErrorSummary lists them above the send key, each linked to its field.
  • Server results. errors and formError print what the server said; the send key goes into loading while the form is pending.
  • Without JavaScript the form posts natively and the page prints the server's result.
  • Default messages are literal (D-I2): "Add your name.", "That email looks incomplete."

Anatomy#

The parts of examples/form/basic.tsx, numbered:
  1. FormNative form, validated by the kit..mk-form
  2. FieldEach control in its Field..mk-field
  3. Send keyThe action key, the form's one action..mk-button

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#

  • Ask only for what you will use; every field is a reason to leave.
  • The send key says what happens: "Send", "Get a quote".
  • After sending, say what happens next and when: "Sent. I reply within one working day."

Do and don't#

Do

Quiet until it is sent or a field is left.

Don't

A form that shows every error in red the moment the page loads.

Errors before anyone typed.

Errors on untouched fields scold people for not having started. Validate on send, then on leaving a field that holds something.

Accessibility#

  • A field is checked on submit and on blur when it holds something; an error clears the moment it is fixed.
  • A failed submit focuses and centres the first failed field; two or more failures print a summary linking to each.
  • With JavaScript off the form posts natively.
KeysWhat happens
Enter in a fieldSubmits; a failed submit moves focus to the first failed field
Tab out of a fieldChecks it when it holds something or is already marked
Enter on a summary linkMoves focus to that field

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
actionstring | ((formData: FormData) => void | Promise<void>)noneA URL (native post, works without JavaScript) or a function action (React 19 form actions).
errorsReadonly<Record<string, string>>noneServer messages by field name.
formErrorstringnoneA server message for the whole form (shown by `ErrorSummary`).
copyPartial<FormCopy>none
onInvalidSubmit((problems: readonly FormProblem[]) => void)noneCalled with the problems after a submit that failed validation.
children requiredReactNodenone

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

Tokens#

System tokens (6)

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