Components

Password Input

Overview

Overview

When to use

Use this component whenever you need users to create or enter a password.

When not to use

Do not use this component to ask for any information other than a password.

Principles

Hide passwords by default until the user chooses to show it using the “show” button.

Use the autocomplete attribute on password inputs to help users complete forms faster. Set the autocomplete attribute to new-password if the user is creating a password. Otherwise, use current-password.

Always allow users to copy and paste in password fields.

Error messages

If the user enters their account details incorrectly, do not reveal whether they got the username or password wrong. Clear any information entered into the password input.

Revealing the source of the error can help fraudsters break into people’s accounts.