Form design encyclopedia

Form Design Encyclopedia — Every Form Pattern

Mental model

Every field is a request for effort, and the user is deciding continuously whether the thing they came for is still worth it. So the discipline is subtraction: the best form change is almost always deleting a field.

• One column. Multi-column forms cause skipped fields and mis-scanning. The exception is genuinely paired data — city and postcode, expiry and CVC.
• Labels above inputs. Fastest to scan, survives translation, survives narrow screens. Placeholder-as-label is an accessibility failure and a memory burden the moment someone starts typing.
• Validate on blur, not on keystroke. Validating while someone is still typing tells them they are wrong before they have finished being right. Re-validate on submit; show errors inline, next to the field, never only at the top.
• An error message names the fix, not the failure. "Enter a date in the past" beats "Invalid date".
• Every field earns its place. If nobody can name the decision a field informs, it is decoration with a compliance cost.

Constants

Every input in the catalog implements these six states. A field missing focus or error is not finished.

default · focus · filled · disabled · error · success

Touch target minimum 44x44px. Label-to-input gap 8px. Field-to-field gap 20-24px. Error text sits directly beneath its field, never floating.

Index

Need	Reference
A specific input type — text, email, phone, date, file, OTP, rich text	input-field-catalog.md
Password strength meter, masked input, currency, percentage	input-field-catalog.md
The six field states as code	input-field-catalog.md
Single column, two column, card-based, inline layouts	form-layout-patterns.md
Login, signup, contact, payment, address, settings, survey forms	form-layout-patterns.md
When to validate and what to say	validation-error-patterns.md
100+ ready error message templates	validation-error-patterns.md
Splitting a long form into steps	multi-step-form-patterns.md
Step indicators, back navigation, data persistence	multi-step-form-patterns.md
Labels, required marking, error association, group labels	form-accessibility-code.md
Why people abandon, and what to instrument	form-analytics.md

Reference architecture

File	Covers	Lines
references/form-layout-patterns.md	19 layouts + specialized forms	2344
references/input-field-catalog.md	55 input types, all states	1539
references/multi-step-form-patterns.md	wizards, steppers, persistence	1151
references/form-accessibility-code.md	semantic HTML, ARIA, errors	1025
references/validation-error-patterns.md	timing, anatomy, 100+ templates	780
references/form-analytics.md	measuring form performance	69

What every reference file contains

1. When the pattern applies and when it does not
2. Complete React plus CSS, with all six states rendered
3. The ARIA wiring — label association, error announcement, group semantics
4. Mobile behaviour: keyboard type, autocomplete token, target size
5. The failure mode that pattern is known for

Routing

For a specific input — the field-state reference plus every input type from text and icon-prefixed through to password strength meters: read references/input-field-catalog.md.

For arranging a form — single column, two column, card-based and the rest of the nineteen layouts, plus the specialized login, signup, contact, payment, address, settings and survey forms: read references/form-layout-patterns.md.

For validation and errors — timing strategy, error message anatomy, 100+ message templates, and warning patterns: read references/validation-error-patterns.md.

For multi-step flows — when to split at all, step indicators, navigation between steps, and data persistence: read references/multi-step-form-patterns.md.

For accessibility — semantic HTML foundations, label association methods, required-field marking, error association and group labeling: read references/form-accessibility-code.md.

For odds and ends — the patterns that had no home in the files above when this skill was converted to a router: read references/form-supplementary.md.

Cross-References

• component-patterns-code (React component implementations)
• micro-copy-intelligence (error messages, helper text, button labels)
• conversion-optimization-patterns (form conversion, CTA optimization)
• accessibility-inclusive-design (WCAG compliance, screen reader testing)
• mobile-ux-design (touch targets, mobile patterns)
• interaction-motion-design (form transitions, validation animations)
• performance-states-patterns (loading, empty, error states)
• navigation-pattern-encyclopedia (form navigation, multi-step flows)