Password input

A password input allows users to create or enter a password.

How to use password input

Use the password input on sign-in forms so that users can enter their password. Use it on registration forms to help users to create a secure and memorable password.

When using a password input:

  • Clearly label the input field so users know that it’s for a password
  • Programmatically connect the label to the input field
  • Give clear instructions on mandatory values and length
  • Make sure that validation messages and hints are announced to screen reader users

Types of password input


The standard password input allows the user to enter or create a password.

  • Interactive demo - Sainsbury's

With visibility toggle

A visibility toggle gives users the option to show their password as readable text.

This feature is particularly useful on a mobile where accurate typing is more difficult.

It can also be used in place of a second 'confirm password' field when the user is creating a new password.

  • Interactive demo - Sainsbury's

With strength hint

Use a password strength hint to show users how secure the password they’re entering is.

This encourages users to create more secure passwords without forcing them stick to strict password requirements.

  • Interactive demo - Sainsbury's

With error message

Use an error message to show if the user’s password has not met the password security requirements. But remember that any password requirements should be made clear right away.

  • Interactive demo - Sainsbury's

Was this page helpful?

Get in touch

Our team can answer any questions about using password inputs or give you a helping hand with your next project.
Select a theme to demo: