UI copy template

Form and validation copy templates

Form copy is a sequence of small decisions: what the field is called, what format it wants, and what happens when the answer does not fit. Labels should stay nouns, helper text should state the rule before the user breaks it, and validation should describe the fix rather than the failure. Field-level copy is length-sensitive in both directions — a label that wraps changes the vertical rhythm of the whole form, and helper text sized for one line often arrives as three.

Open in TypeMatch

Loads the preset below in this page. It never runs on its own and never touches text you have already typed.

Copy that works, and copy that does not

Works

  • Work email

    A specific noun. The user knows which address to use.

  • At least 12 characters, including a number

    States the rule up front so it is not discovered through failure.

  • Card expiry · MM/YY

    Format shown in the label rather than enforced silently.

Falls short

  • Name*

    First, last or full? The asterisk is also the only signal that it is required.

  • Please enter your information in the correct format

    No field named, no format described.

  • Invalid

    One word that neither identifies the rule nor the fix.

Length to design for

Suggested copy lengths for forms and validation
ElementSuggested rangeWhy
Field label1–3 words, under 25 charactersStays on one line in both stacked and two-column layouts.
Helper textunder 80 charactersOne line under the input at typical form widths.
Validation message3–10 wordsReadable in the moment of correction without shifting the layout.
Section heading2–5 wordsGroups fields without competing with the page title.

These ranges are starting points drawn from common component widths, not rules. Measure against your own type scale and breakpoints before locking a constraint.

Accessibility considerations

  • Every input needs a programmatically associated <label>. Placeholder text is not a label — it disappears the moment typing starts.
  • Link helper text and validation messages to the input with aria-describedby so both are announced with the field.
  • Mark required fields in words as well as with an asterisk, and state the convention once at the top of the form.
  • Validate on blur or submit rather than on every keystroke, so the announcement does not interrupt typing.

Try this preset in TypeMatch

Loaded with a label, helper line and validation message so you can check how each behaves at your slot width.

Your text

Up to 20,000 characters per run. Emoji, accented characters and multiple paragraphs are all supported.

How your text is handled: matching runs in this browser tab, so the text you paste here is not sent to a TypeMatch server and is not saved between visits — closing or reloading the tab clears it. Usage analytics record only counts and settings, never your text. Anything you copy out is then handled by your own clipboard and the app you paste into.

Detected in your text

Words
16
Chars
93
No spaces
76
Paragraphs
3
Length constraint

Auto-detected from your text (93 chars). Unlock to set your own.

or press ⌘/Ctrl Enter
Refine result
Match method

Recent on this device

Your last 10 runs will be listed here, saved in this browser's local storage only. Nothing is uploaded and you can clear it at any time.

Saved presets

Save the current content type, tone, constraint mode and structure settings so your next run starts configured. Presets stay in this browser.

Generated copy

Waiting for your text

Variants

Paste your text and press “Match my copy” — you’ll get three verified variants to compare.

Words
0/ 16
Chars
0/ 93
No spaces
0/ 76
Paragraphs
0/ 3
Matching runs in this browser tab
Refine

Refinements keep your exact characters (with spaces) target of 93 unchanged.