Forms & Inputs — Design Guide

Forms are where products lose users. Every field must earn its place.

Single column always (multi-column forms cause skipped fields and eye-path zigzag). Exception: tightly-related pairs (First/Last name, City/ZIP, MM/YY + CVC).
Order fields easiest → hardest; ask for sensitive data (phone, payment) last.
Group related fields with headings and 24–32px group spacing; 16–24px between fields.
Cut every field you can derive, default, or postpone. Each removed field measurably raises completion.
Long forms: split into steps (wizard) with a progress indicator; 3–6 fields per step beats one 20-field page.

Always visible labels above the field (not placeholder-as-label — it vanishes on focus, kills recall, fails accessibility).
Floating labels (Material filled/outlined fields) are acceptable; top-aligned static labels test fastest.
Placeholders only for format examples ("name@company.com"), in muted color, never required info.
Mark optional fields ("Optional" suffix) rather than starring required ones when most fields are required.
Label ↔ input programmatic association is mandatory (<label for>, aria-labelledby).

Input height: 44–56px mobile, 40–48px desktop; text ≥16px on mobile (prevents iOS zoom-on-focus).
Use correct types/attributes: type="email|tel|url|number", inputmode, autocomplete (huge mobile win: autocomplete="email", "one-time-code", "cc-number"…).
Show the right mobile keyboard per field; never force numeric entry on a text keyboard.
Support paste everywhere, especially OTP and password fields.
Password fields: show/hide toggle; show requirements up front as a live checklist, not after failure.

Validate on blur (or on submit), never on every keystroke while the user is still typing — except live-positive confirmation (username availability, password checklist).
"Reward early, punish late": once a field was marked invalid, re-validate on each keystroke so the error clears immediately when fixed.
Error messages: below the field, red text + icon (not color alone), specific and actionable — "Enter a valid email like name@domain.com", never "Invalid input".
On submit with errors: scroll/focus to the first error; summarize count for screen readers (aria-live).
Never clear the form on error. Never.

≤5 mutually-exclusive options: radio group / segmented control. 6+: select/dropdown or searchable combobox.
Multi-select ≤7: checkboxes; more: multi-select combobox with chips.
Toggles/switches: only for instant-effect settings (no Save button); checkboxes for form consent/choices requiring submit.
Date input: use platform date pickers on mobile; on web allow typed entry alongside the picker.

Placeholder-only labels; ALL-CAPS labels; centered-text inputs.
Resetting scroll or clearing fields after a validation error.
Disabling paste in password/OTP fields.
Dropdowns for 2–4 options, or for well-known sets better typed (country of residence when most users are one country — default it).
Inline "success" checkmarks on every trivially-valid field (noise).
CAPTCHAs before any user investment; put friction after intent is shown.

Sources