form-design

Form Design

Forms are where users give the product data. Every unnecessary obstacle between the user and a completed form is a failure. The design goal is to make correct input easy and incorrect input obvious — before the user submits.

The Three Guidance Layers

Each layer serves a distinct purpose. Do not collapse them.

Layer 1 — Helper Text

Explains what to enter. Appears below the input, always visible, in small secondary text.

Email address
[                              ]
Use the email you signed up with.

• Write in plain language from the user's perspective
• Keep it to one sentence — if you need more, the field is too complex or misnamed
• Do not repeat the label ("Enter your email" below a label that says "Email" is redundant)
• Helper text is not a replacement for a label — the label is still required

Layer 2 — Placeholder

Shows the format or an example value. Appears inside the input, disappears on typing.

[[email protected]              ]

• Use a realistic example, not a description: +358 40 123 4567 not Enter phone number
• Never use placeholder as a label — it disappears and leaves the user without context
• Keep it grey (--color-text-secondary) and lighter than actual input text
• Optional — not every field needs a placeholder

Layer 3 — Validation

Confirms whether the input is correct. The most important layer.

Email address
[jane@           ] ← invalid
✗ Enter a valid email address.

Validation timing:

• On blur (leaving the field): default for most fields — validates once the user has finished
• Real-time (on input): use when the format is complex or the error is likely — password strength, IBAN, VAT number, URL, regex-heavy fields
• On submit: catches anything missed, scrolls to the first error

Real-time validation must be forgiving at the start — do not show an error the instant the user starts typing. Show it after a short debounce (300–500ms) or after the first character that makes the input definitively wrong.