designmotionhq

forms

Password Field UX

Eight characters, one symbol: still weak. Strength lives in real-time feedback.

Watch on Instagram

Key insights

  • Strength is entropy, not a checkbox tally — a longer passphrase beats a mandatory symbol every time.
  • Show the requirements checklist as they type and tick each rule green before they hit submit — never reveal the rules only after a failed attempt.
  • A live strength meter coaches in real time: a growing bar says "almost," while post-submit errors only punish after the fact.
  • Add an eye toggle to unmask the field — masked dots cause silent typos users can't catch.
  • Never block paste — password managers fill longer, stronger passwords than anyone types by hand.
  • The strongest pattern is to offer a generated password: one tap for a unique, saved, never-reused credential.

Do / Don't

  • Do: Surface a live checklist and strength meter that update on every keystroke
  • Do: Offer a visibility toggle plus a one-tap generated password
  • Do: Allow paste so password managers can fill strong credentials
  • Don't: Hide the rules until after submit, then punish with red errors
  • Don't: Treat a capital-and-symbol checkbox as proof of real strength
  • Don't: Block paste or force users to retype long passwords manually

Want Claude to build this correctly?

UX Engine gives Claude Code the senior-designer reasoning behind every pattern.

The Design System Blueprint

An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.

Get the Blueprint — free

The PDF, plus emails about new patterns and my tools. Unsubscribe anytime.

Related patterns