The password field is a specialized input field with the ability to toggle between the masked field or to view the password in plain text.

Usage

Use a password field when the user needs to set or input the password.

When setting a password, display the password requirement in the helper text to guide the user. Don’t hide it a in signpost, or reveal it only after the user fails the first attempt.

States

Password Use 8 or more characters with a mix of letters, numbers & symbols

Enabled

Use when interactive and ready for input.

Password Use 8 or more characters with a mix of letters, numbers & symbols

Active

Use when selected by a user with an input method, such as mouse or keyboard.

Password Use 8 or more characters with a mix of letters, numbers & symbols

Disabled

Use when not interactive. For example, when a user does not have permissions to edit the input.

Password Use 8 or more characters for your password

Error

Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.

Password Password meets requirements

Success

Use to provide real-time feedback immediately after a user’s input. For example, username available.

Layouts

Passwords are available in vertical, horizontal, and compact layout. Vertical Password layouts can have improved usability in addition to the general guidelines when the message text is used to display requirements. See more layout guidelines on the form page.

Vertical

label message text

Horizontal

label message text

Compact

label message text