Password Field

Overview

Password fields allow users to discreetly enter a password.

Behaviors

Focus

When the focus shifts to the icon button, the text field loses focus.

Disable

When disabled, the field is shown with a darkened background and the icon buttons are at 50% opacity. The field, and icon button cannot be selected, focused, or interacted with in any way.

Show/hide

By default, password characters are hidden and appear as dots, or the browser default for hidden passwords. The dots are replaced by plain text (see Typography under Styles) when the user toggles an icon button to show the password.

The icon button is an eye icon inside the password field to the right. It should be labeled Show password when the password is hidden and Hide password when the password is shown.

Variations

Password entry

A password field where users can enter an existing password. Password entry fields are usually found on login pages that allow users to gain access.

Usage guidelines

Content guidelines

Label
All password fields need labels. The label should be short, no more than 1-2 words. Usually, labelling the field Password works just fine, unless more specification is needed.

Password length
As a general rule, password fields should support passwords up to 255 characters in length.

There may be cases where exceptions to this are necessary. For instance, systems that have shorter or longer password length limits. In those cases, the password field length limit should correspond to any limit of the system being integrated.

Error messages
Password entry field error messages should be written in plain language that sounds human. They can guide the user forward while still maintaining security standards.