Password Text fields allow users to input and edit passwords.

Password Text fields typically reside in forms but can appear in other places, like dialog boxes and search.

Principles

Password Text fields should have the following characteristics:

Identifiable

Using a tappable touch target, password text fields should indicate that users can enter information.

Findable

It should be easy to find a password text field among other elements.

Legible

Password Text fields should indicate their state – whether enabled or disabled, empty or filled, valid or invalid – with clear label, input, and assistive text.

Layout

Password Text fields contain the following elements:


Label

Password Text field labels display the type of input a field requires. Every text field should have a label.
Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating.

Password Input line

The input line indicates where to enter text, displayed below the label.
When a field is active or contains an error, the line’s color and thickness vary.

Cursor

The cursor indicates the user’s current input position.


Password text box


Disabled

Text field states in light and dark themes.