Skip to content
Site volume
Colourway

Components

Textarea

The Input box around a text area that grows with its content from four rows to sixteen, then scrolls.

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

Example#

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

Usage#

Use a textarea for answers that run longer than a line: a message, a project brief, notes. It grows with what is typed from four rows to sixteen, then scrolls, and can be dragged taller.

  • Rows. minRows (default 4) and maxRows (default 16) bound the growth.
  • Limits. Pair maxLength with a CharacterCount under the field, so the limit is visible before anyone reaches it.
  • One line? Use Input. A textarea for a name or an email invites the wrong answer.

Anatomy#

The parts of examples/textarea/basic.tsx, numbered:
  1. BoxThe Input's box and states, sized by its content..mk-textarea
  2. Text areaThe native textarea; it resizes vertically..mk-textarea-control

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 an open question in the label or the hint: "What are you making, and by when?"
  • If you need specific details, list them in the hint instead of in the placeholder.
  • State any limit in words before it bites: "Up to 2,000 characters".

Do and don't#

Do

What you are making, and by when.

The ask lives in the hint, which stays.

Don't

A long placeholder is gone at the first letter.

Instructions in a placeholder disappear exactly when someone needs them. Put them in the hint under the label.

Accessibility#

  • Native textarea semantics; it grows with field-sizing: content where supported and can be resized vertically.
  • States and messages work as Input's.
KeysWhat happens
TabMoves focus into the field
EnterStarts a new line

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-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
minRowsnumber4Rows shown when empty (default 4).
maxRowsnumber16Rows it grows to before it scrolls (default 16).
classNamestringnoneLands on the box.
styleCSSPropertiesnoneLands on the box.

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

Tokens#

System tokens (20)

Its own properties (5)

  • --mk-textarea-hatch
  • --mk-textarea-max-rows
  • --mk-textarea-min-rows
  • --mk-textarea-pad
  • --mk-textarea-pad-block

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