Forms are where products earn or lose user trust. Every system has an Input component. Few systems document the pattern layer above it: when validation fires, where errors render, how to handle async server validation, what happens when the user navigates away mid-form, how to support save-and-resume for long flows.
These references are worth studying together — each tackles forms from a different surface (admin, payments, marketing, government) and the patterns that emerge are remarkably consistent.
- 01Inline validation that fires on blur, not on every keystroke; submit-time validation as backstop.
- 02Errors rendered adjacent to the field, with consistent severity language.
- 03Disabled-submit affordance is rare — prefer enabling submit and surfacing the error on attempt.
- 04Long forms support save-and-resume, with explicit progress indicators.
- 05Money fields, date fields, and search inputs are first-class — not generic Input components with format props.
- 01Validation timing is inconsistent across forms because the system doesn't specify it; users hit the same field, see different behavior, and lose trust.
- 02Errors render in a single banner at the top of the form, away from the offending field.
- 03Multi-step forms reset on navigation because nobody decided where state lives.
Polaris
Shopify
FormLayout
Field grouping that handles long forms and inline validation cleanly — Shopify's merchant onboarding is the reference flow.
Stripe Design System
Stripe
AmountInput
Currency-aware input with locale formatting and decimal-place enforcement; the form pattern that proves money fields aren't text fields.
GOV.UK Design System
UK Government
Form patterns
Engineered for users completing high-stakes services (taxes, benefits, immigration). Single-question-per-page is the reference for clarity.
Mailchimp Design System
Mailchimp
Campaign Builder
Multi-step editor with live preview, save-and-resume, and async send — the gold standard for long-flow forms.