Introduction
To strengthen security, passwords have become more and more complex. They need to meet multiple requirements and they vary by service. It’s impossible for users to check and remember all requirements to create a compliant password. A password requirements popover assists users to create a password by providing the list of requirements and showing their compliance progress.
Usage
if there are multiple complex requirements to create or update a password.
if there are less than three requirements and they are simple. Consider using a description in the value state of the input field. Using the popover may slow down a simple task.
Anatomy
Behavior & Interactions
Placement
Show the password requirements popover when the password field is selected and focused. Placing the popover at the bottom () or the right () is preferred to make sure it doesn’t block other input fields that follow.
Responsiveness
The component follows the responsive behavior of its container, which in this case is the popover.
Update Content
Update the compliance of each requirement for every keystroke of the user. Providing immediate feedback is important, because the user can be assured of the input and know where to modify without leaving the context.
Best Practices
Good, short UI copies
List similar requirements closely
By placing similar requirements close to each other, users can easily process them. For example, if the password requires at least one special character and only selected characters are accepted, state them together as one rule or place them line by line.
Use correct status icons and semantic status
Specifications
