UI + UX Input And Data Entry standard

Password creation

Support generated and pasted passwords, explain a small set of real acceptance rules, reject commonly used or compromised secrets with correction reasons, avoid arbitrary composition and rotation rules, and protect the accepted password like a secret throughout setup and reset.

Decision first

Choose this pattern when the problem matches

Use when

  • The user is creating an account with a reusable password.
  • The user is resetting a forgotten password through a time-limited recovery link or code.
  • The user is changing a current password to a new password.
  • The service can support password managers, paste, blocklist checks, protected transport, hashing, and safe reset notifications.

Avoid when

  • The user is only entering an existing password to sign in or reauthenticate.
  • The task is entering a one-time code, recovery code, passkey, magic link, or federated sign-in.
  • The service has chosen a passwordless or passkey-first route and no reusable password is needed.
  • The product cannot prevent raw passwords from entering logs, analytics, support tools, local storage, or screenshots.
  • The backend cannot support common or breached password rejection, long values, paste, and safe password storage.

Problem it prevents

Creating a password asks users to make a long-term authentication secret under policy pressure, so confusing rules, paste blocking, weak checklist meters, or unsafe reset practices can make accounts weaker while increasing abandonment and recovery burden.

Pattern anatomy

What a strong implementation has to make clear

User need

The user is registering, setting an initial password, resetting a forgotten password, changing a compromised password, or replacing a password after an account-security event.

Pattern promise

Support generated and pasted passwords, explain a small set of real acceptance rules, reject commonly used or compromised secrets with correction reasons, avoid arbitrary composition and rotation rules, and protect the accepted password like a secret throughout setup and reset.

Required state

Initial new-password state with purpose, autocomplete new-password, minimum length, paste support, show and hide control, and no character-class checklist.

Recovery path

Users choose predictable variants because the UI rewards character classes rather than rejecting known weak values.

Access contract

Use a visible label that says New password or Create a password rather than only Password when the user is choosing a new value.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A signup form labels the field New password, uses autocomplete new-password, allows password-manager generation, says Use at least 15 characters or a generated password, and rejects Password123 because it is commonly used.
  • A password reset page separates Current password from New password, shows one new-password field with Show and Hide, accepts a long passphrase with spaces, and explains when the chosen value appears in breach data.
  • A user accepts a password-manager suggestion, pastes it into the field, sees that it meets length and is not in the blocked list, and continues without retyping it.
  • A user tries Password123, sees This password is commonly used, then switches to a long passphrase and the form accepts it without demanding symbols.
Weak implementation

Vague, hidden, hard to recover from

  • A form requires one uppercase letter, one lowercase letter, one number, one symbol, no spaces, and a 12-character maximum while still accepting Summer2026!
  • A reset form asks for a password reminder question and then emails the new password to the user.
  • A user enters a strong generated password but the site silently cuts it at 16 characters, so the saved password does not match the password manager.
  • A user is forced to rotate a password every month and chooses predictable variations that are easier to guess.
UI guidance
  • Render password creation as a labelled new-password field with visible policy guidance, generator and paste compatibility, show and hide control, field-level rejection reasons, and a confirmation state that never displays the accepted secret later.
  • Keep the guidance focused on what actually affects acceptance: length, banned or breached value checks, service-specific terms, and password-manager compatibility rather than a decorative checklist of character classes.
UX guidance
  • Use password creation when a user is choosing a new reusable secret during registration, password reset, first-time setup, or password change.
  • Help users create a strong unique password by allowing generated values, paste, long passphrases, spaces, and printable characters, while rejecting common or compromised secrets with actionable reasons.
Implementation contract

What the implementation must handle

States

  • Initial new-password state with purpose, autocomplete new-password, minimum length, paste support, show and hide control, and no character-class checklist.
  • Generated password state where a password-manager value is accepted without blocking paste or truncation.
  • Visible password state with matching Hide control and no spellcheck or autocapitalization.
  • Too-short state with the entered value preserved and a field-level length message.

Interaction

  • Typing, paste, autofill, password-manager generation, deletion, and selection follow native input behavior.
  • Show and Hide change only visibility and do not change the value, cursor, validation status, or autocomplete purpose.
  • Validation reasons update after typing, paste, blur, or submit without exposing the raw password in logs or analytics.
  • Rejected values remain editable long enough for correction but are not displayed elsewhere.

Accessibility

  • Use a visible label that says New password or Create a password rather than only Password when the user is choosing a new value.
  • Connect policy guidance, strength feedback, and rejection messages to the field with descriptive relationships.
  • Expose Show and Hide as buttons with state-specific accessible labels and do not rely on an eye icon alone.
  • Announce rejection and accepted states without reading the password value.

Review

  • Is the user creating a new reusable secret, or entering an existing one?
  • Does the field use autocomplete new-password and allow password-manager generation?
  • Can users paste long generated passwords without truncation?
  • Which common, breached, service-name, username-derived, or organization-specific values are blocked?
Interactive lab

Inspect the states before you copy the pattern

Create a strong reusable password

Paste a generated password, reject common or breached choices, accept a long passphrase, toggle show and hide, and compare against a weak character-class checklist.

Password creation
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Initial new-password state with purpose, autocomplete new-password, minimum length, paste support, show and hide control, and no character-class checklist.

Keyboard / Access

Tab order follows current password when present, new password, show or hide control, recovery or generator guidance, submit, and alternate security setup.

Avoid Generating

Using uppercase, lowercase, number, and symbol checklists as the main security signal.

Evidence trail

Source-backed claims behind this guidance

GOV.UK Design System Passwords pattern

GOV.UK Design System - checked

GOV.UK supports strong unique passwords, paste support, clear restrictions, minimum length, no maximum length, common-password rejection, no periodic changes, no reset questions, no reminders, and no emailed passwords.

NIST SP 800-63B Passwords

National Institute of Standards and Technology - checked

NIST supports blocklist rejection, length requirements, no composition rules, printable and Unicode characters, password-manager and paste support, display option, protected channels, and salted hashing.

Microsoft Entra Password Protection

Microsoft Learn - checked

Microsoft supports banned password checks during password change or reset, weak-variant detection, custom organization terms, and MFA as additional protection.

MDN HTML autocomplete password tokens

MDN Web Docs - checked

MDN supports new-password for creation and change flows, current-password for existing secrets, and one-time-code for short-lived codes.

Full agent/debug reference

Problem Context

  • The user is registering, setting an initial password, resetting a forgotten password, changing a compromised password, or replacing a password after an account-security event.
  • Users may use a password manager, browser-generated password, passphrase, copied value, mobile keyboard, or assistive technology.
  • The system may need different rules for single-factor and MFA-backed accounts, but those rules must be clear wherever users create and later enter the password.
  • Common-password, breached-password, service-name, username-derived, or organization-specific banned checks can reject a value that otherwise looks long enough.
  • Password creation often sits near account recovery, MFA setup, passwordless options, and notification workflows, but it must not expose the new secret through reminders, email, logs, or review pages.

Selection Rules

  • Choose password creation when the user must choose or replace a reusable password, passphrase, or memorized secret.
  • Use autocomplete new-password for the new password field and current-password only for the old password field in a change flow.
  • Encourage password-manager generation and allow paste, autofill, long values, spaces, and printable characters.
  • State the minimum length and any true technical restrictions before the user starts typing.
  • Do not set a short maximum length; if any upper bound exists, validate it with an error rather than silent truncation.
  • Do not require arbitrary mixtures of uppercase, lowercase, numbers, and symbols as a substitute for real strength checks.
  • Reject commonly used, expected, breached, service-name, username-derived, or organization-specific weak values with a correction reason.
  • Use a strength meter only if it models guessability or known weak patterns; do not use a checklist that can be satisfied by predictable substitutions.
  • Do not require routine password changes unless there is evidence of compromise or an authenticator change that requires rotation.
  • Do not ask for password reminders, password reset questions, or email delivery of the password.
  • If extra protection is needed, offer MFA or passwordless setup rather than piling on password restrictions.
  • Never show the accepted password on review, confirmation, receipts, support tools, analytics, screenshots, or account summaries.

Required States

  • Initial new-password state with purpose, autocomplete new-password, minimum length, paste support, show and hide control, and no character-class checklist.
  • Generated password state where a password-manager value is accepted without blocking paste or truncation.
  • Visible password state with matching Hide control and no spellcheck or autocapitalization.
  • Too-short state with the entered value preserved and a field-level length message.
  • Common password rejected state with a reason such as This password is commonly used.
  • Breached password rejected state that explains the value has appeared in exposed-password data without logging the raw value.
  • Service-name or username-derived rejected state with a reason that does not reveal the full banned list.
  • Strong passphrase accepted state with spaces allowed and no symbol requirement.
  • Submitted state where the password is no longer visible and the next step describes account security or MFA setup.
  • Password reset state that uses a time-limited link or code and never sends the new password by email.

Interaction Contract

  • Typing, paste, autofill, password-manager generation, deletion, and selection follow native input behavior.
  • Show and Hide change only visibility and do not change the value, cursor, validation status, or autocomplete purpose.
  • Validation reasons update after typing, paste, blur, or submit without exposing the raw password in logs or analytics.
  • Rejected values remain editable long enough for correction but are not displayed elsewhere.
  • Accepted passwords are submitted through protected transport and never appear on review pages or confirmation screens.
  • If current password is required in a change flow, it is separate from new password and uses current-password autocomplete.
  • Password creation can hand off to MFA, passkey, recovery, or account notification steps without weakening the password rules.

Implementation Checklist

  • Define minimum length, maximum supported length, accepted character set, Unicode handling, blocklist source, breached-password check, service-specific banned terms, rate limit, storage hashing, and reset notification policy before designing the UI.
  • Use native password inputs with visible labels, autocomplete new-password, spellcheck false, autocapitalize none or off, aria-describedby for guidance and errors, and a show and hide button.
  • Allow paste and password-manager generation; test generated passwords longer than 64 characters, spaces, punctuation, Unicode, mobile keyboards, browser suggestions, and password-manager overlays.
  • Reject known weak values through common, breached, service-name, username-derived, and organization-specific checks with concise reasons and recovery advice.
  • Avoid character-class checklists, short maximum lengths, silent truncation, periodic rotation, reset questions, reminders, emailed passwords, and storage of raw password values.
  • Ensure backend submission uses protected transport, rate-limited change and reset attempts, salted password hashing with suitable work factors, and account notifications after reset or security-sensitive changes.

Common Generated-UI Mistakes

  • Using uppercase, lowercase, number, and symbol checklists as the main security signal.
  • Blocking password-manager paste or generated passwords.
  • Silently truncating long generated passwords.
  • Rejecting spaces or Unicode without a documented technical reason.
  • Accepting Password123 because it satisfies character classes.
  • Forcing routine password rotation without compromise evidence.
  • Asking for password reset questions or reminders.
  • Sending the password by email after reset.
  • Displaying the new password on review, logs, analytics, support tools, screenshots, or account summaries.

Critique Questions

  • Is the user creating a new reusable secret, or entering an existing one?
  • Does the field use autocomplete new-password and allow password-manager generation?
  • Can users paste long generated passwords without truncation?
  • Which common, breached, service-name, username-derived, or organization-specific values are blocked?
  • Does rejection explain what to fix without publishing the banned list or encouraging trivial substitutions?
  • Are character-class rules, periodic rotation, reminders, reset questions, and emailed passwords avoided?
  • Where could the raw new password leak after submit?
Accessibility
  • Use a visible label that says New password or Create a password rather than only Password when the user is choosing a new value.
  • Connect policy guidance, strength feedback, and rejection messages to the field with descriptive relationships.
  • Expose Show and Hide as buttons with state-specific accessible labels and do not rely on an eye icon alone.
  • Announce rejection and accepted states without reading the password value.
  • Keep password-manager and browser-generated password controls compatible with the native input.
  • Do not use color alone for strength or blocked-password status.
  • If a form-level summary appears after submit, link it to the new password field without echoing the secret.
Keyboard Behavior
  • Tab order follows current password when present, new password, show or hide control, recovery or generator guidance, submit, and alternate security setup.
  • Typing, paste, password-manager generation, selection, deletion, undo, and redo use native input behavior.
  • Space or Enter activates Show and Hide without submitting the form.
  • Submit with an invalid new password moves focus to the error summary or new password field and preserves the editable value.
  • Browser Back does not restore the new password as visible text.
  • Password-manager suggestion popovers are not covered by custom controls.
Variants
  • Account registration password
  • Password reset new password
  • Current and new password change
  • Password-manager generated password
  • Long passphrase
  • Breached password rejection
  • Common password rejection
  • Service-name rejection
  • Strength meter with suggestions
  • MFA setup handoff
  • Passwordless alternative offer

Verification

Last verified: