The password input component is used for entering sensitive information, such as passwords or passphrases. It masks the user’s input to maintain privacy and security by replacing typed characters with symbols like dots or asterisks.
Anatomy
Title: Clearly indicates that this is a password input field.
Text hint: Provides instructions about the password requirements.
Input box: The interactive area where users can type their passwords. Characters are masked to ensure privacy.
Show password toggle: An option that users can activate to unmask their input.
Forgot password: Provides access to the functionality to reset a password.
Usage Guidelines
Password Requirements
If there are specific password requirements (e.g., minimum length, special characters) display them as hint in the description field.
Eliminating the confirm password field simplifies the registration process, reducing the number of steps and making it quicker and easier for users to sign up.
Providing a “Show Password” toggle allows users to verify their input without retyping it