A password input allows users to create or enter a password.
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
The standard password input allows the user to enter or create a password.
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.
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.
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.