Passwords

Follow this pattern when you need to ask users to create a password or enter an existing password.

When to use this pattern

Use this pattern when your service requires user authentication. Consider alternatives like:

• magic links sent via email
• one-time passcodes
• authentication through RealMe or other identity providers

Creating a password

When asking users to create a password, give them clear guidance on requirements.

<div class="form-group">
  <label class="form-label" for="new-password">Create a password</label>
  <span class="form-hint">
    Your password must be at least 12 characters and include a number.
  </span>
  <input
    class="form-input form-input-width-20"
    id="new-password"
    type="password"
    autocomplete="new-password"
  >
</div>

Password confirmation

Entering an existing password

<div class="form-group">
  <label class="form-label" for="password">Password</label>
  <input class="form-input form-input-width-20" id="password" type="password" autocomplete="current-password">
  <p><a href="#">Forgotten your password?</a></p>
</div>

Show/hide password

Allow users to show their password to check for mistakes.

Password requirements

Modern security guidance recommends:

• Minimum 12 characters (longer is better)
• No maximum length (or very high, like 256 characters)
• Do not require special characters - they make passwords harder to remember
• Check against common password lists
• Allow spaces and all Unicode characters

Error messages

If password is empty

"Enter your password"

If password is too short

"Password must be 12 characters or more"

If password is too common

"Enter a password that is harder to guess"

If passwords don't match

"Passwords do not match"

If password is incorrect (login)

"Password is incorrect" (do not reveal which field is wrong)

Accessibility

• Use autocomplete="new-password" for password creation
• Use autocomplete="current-password" for login
• Provide a show/hide toggle with proper labelling
• Do not use timed lockouts for accessibility