Resources
Intro
Input with password enables secure text entry for sensitive information whilst providing users the ability to verify their input when needed.
Use password inputs for authentication, account creation, or any scenario requiring confidential text entry.
The component is based on MDX text input.
Options & Styles
Input & Icon
Input value as dots masks the entered text to maintain privacy and security during input.
Eye icon provides show/hide functionality, allowing users to toggle between masked and visible text for verification.
Validation
Password inputs provide visual feedback during validation:
Success indicates the password meets all requirements and is acceptable
Error highlights when the password doesn't meet criteria with specific guidance for improvement
Best Practice & Usage
Password inputs should balance security with usability, providing clear feedback whilst maintaining input privacy.
Include toggle visibility to help users verify complex passwords without compromising security.
Always mask password input by default to protect sensitive information from onlookers.
Use hints to provide helpful information about what is expected from users.
Avoid hints that restate the same information given in the label.
Keep error messages short and focus on providing helpful solutions.
Avoid vague error messages that leave users guessing about what went wrong.