Skip to content
Site volume
Colourway

Components

Field

A label, an optional description, one control and an error line, with ids derived from the name.

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

Example#

Look of this example

Only for replies.

Live render of examples/field/basic.tsx

Usage#

Wrap every form control in a Field: it prints the label, the hint and the error, and wires them to the control with ids, aria-describedby and aria-invalid. Groups of radios or checkboxes use Fieldset.

  • Required and optional. Optional fields print "(optional)" after the label; required ones are not marked, because most fields in a short form are required.
  • Errors. error prints a server message; messages overrides the default validation messages per check. The error line is always in the markup, empty and hidden until used.
  • Layout. orientation="horizontal" puts a 14 rem label column beside the control from md.
  • Ids come from idPrefix and name, with no hooks, so fields render on the server.

Anatomy#

Only for replies.

Add your email, so I can reply.

The parts of examples/field/anatomy.tsx, numbered:
  1. LabelField-label role, 16 px, weight 600..mk-field-label
  2. HintMeta role, read with the control..mk-field-description
  3. ControlOne control element..mk-input
  4. ErrorThe error glyph and a literal message..mk-field-error

Volume#

Reading layer: identical at every volume.

  • Quiet

    Only for replies.

    Add your email, so I can reply.

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

  • Studio

    Only for replies.

    Add your email, so I can reply.

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

  • Press

    Only for replies.

    Add your email, so I can reply.

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

  • Rave

    Only for replies.

    Add your email, so I can reply.

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

Content#

  • Labels are nouns: "Email", "Your current website". No colons.
  • Hints say why or how: "Only for replies."
  • Errors say what to do in the field's words: "Add your email, so I can reply."

Do and don't#

Do

Add your email, so I can reply.

Says how to fix it.

Don't

Error: invalid value.

Blames without helping.

An error message is the next instruction. It names the field and what to put in it.

Accessibility#

  • The control gets id, name, required, aria-describedby (description and error) and aria-invalid.
  • Optional fields are marked "(optional)"; required ones are not.
  • Errors print a glyph and words in the text colour, never red.
KeysWhat happens
TabMoves focus to the field's control; its label, description and error are announced

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-2--mk-papermeta 7.21:1 · Lc 80.3, passes 12.18:1 · Lc 77.4, passes
--mk-ink-2--mk-paper-sunkenmeta 6.65:1 · Lc 75.1, passes 11.67:1 · Lc 77.0, passes
--mk-ink-2--mk-paper-platemeta 8.06:1 · Lc 87.9, passes 11.29:1 · Lc 76.6, passes
--mk-on-control-2--mk-controlbody-ui 6.59:1 · Lc 82.6, passes 12.47:1 · Lc 82.8, passes

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

Props#

PropTypeDefaultDescription
label requiredReactNodenoneRequired: the visible label.
name requiredstringnoneRequired: posts with the form and derives the ids.
descriptionReactNodenone
errorstringnoneA server message (20 §8); `Form` writes client messages into the same line.
requiredbooleannone
optionalLabelstring"(optionalShown when the field is not required (default "(optional)").
idPrefixstringnone
messagesPartial<Record<ValidityKey, string>>noneLiteral messages per validity state, overriding Form's defaults.
orientation"horizontal" | "vertical"noneHorizontal from the md width: a 14rem label column.
children requiredReactElement<unknown, string | React.JSXElementConstructor<any>>noneOne control element (Input, Textarea, Select, Slider, Switch, a native control).

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

Tokens#

System tokens (14)

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