Skip to content
Site volume
Colourway

Components

Input

A text field in the control box: hover and focus take the ink rule, invalid takes a heavier rule and a hatch strip.

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

Example#

Look of this example
https://
Live render of examples/input/basic.tsx

Usage#

Use an input for one line of text: a name, an email address, a website, a number. Put it in a Field, which prints the label, the hint and the error, and wires them to the input.

  • Types. text, email, tel, url, search, password and number; numbers get the numeric keypad and tabular figures, with no spinners.
  • Start and end. start and end hold short fixed text or a glyph inside the box, such as "https://" or "CAD".
  • Sizes. sm 40, md 48 (default) and lg 56 px.
  • For more than one line, use Textarea. For a fixed list, use Select; for a long list to search, Combobox.

Anatomy#

https://
The parts of examples/input/basic.tsx, numbered:
  1. BoxThe control face with a 2 px rule; hover and focus take the ink..mk-input
  2. Start textFixed text or a glyph; never the label..mk-input-start
  3. TextThe native input, 16 px so phones do not zoom..mk-input-control

Volume#

Reading layer: the box, the rule and the type are identical at every volume, so a form never gets louder than its labels.

  • Quiet

    https://

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

  • Studio

    https://

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

  • Press

    https://

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

  • Rave

    https://

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

Content#

  • The label above the box says what goes in it, in two or three words: "Email", "Your current website".
  • Placeholders show the format, never the label: "fernlight.example", not "Enter your website".
  • Errors say what to do: "Enter an email address like jordan@example.com", not "Invalid input".

Do and don't#

Do

A visible label, and a placeholder that shows the format.

Don't

The only label disappears on the first keystroke.

A placeholder vanishes as soon as someone types, and its ink is lighter than a label. The label stays above the box, always visible.

Accessibility#

  • Use it inside Field, which wires the label, the description, the error line and aria-invalid.
  • Text is 16 px, so phones never zoom; the placeholder is never the label.
  • Invalid fields take a 3 px rule and a 6 px hatch strip, with the message in words below: no red.
KeysWhat happens
TabMoves focus into the field
TypingEdits the value; a fixed error clears at once inside Form

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-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
--mk-ink-disabled--mk-paperui 3.27:1 · Lc 56.5, passes 6.53:1 · Lc 46.1, passes
--mk-ink-disabled--mk-paper-sunkenui 3.01:1 · Lc 51.2, passes 6.25:1 · Lc 45.7, passes
--mk-ink-disabled--mk-paper-plateui 3.65:1 · Lc 64.1, passes 6.05:1 · Lc 45.4, 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
typeInputTypenone
sizeSizenone40 / 48 (default) / 56 px.
startReactNodenoneA glyph or text before the value, e.g. "https://".
endReactNodenoneA glyph or text after the value.
classNamestringnoneLands on the box.
styleCSSPropertiesnoneLands on the box.

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

Tokens#

System tokens (26)

Its own properties (5)

  • --mk-input-end-w
  • --mk-input-h
  • --mk-input-hatch
  • --mk-input-pad
  • --mk-input-start-w

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