Recommended resources
Courses
Introduction to Figma
Common Design Patterns
Apple Human Interface Guidelines
Accessibility Foundations
UI Components II
Service Design
Mobile Design
Design Composition
Wireframing
CSS Foundations
3D Design Foundations
UX Design Patterns with Checklist Design
Exercises

Allow users to reveal the password

Make it easy to reset passwords

Place reset link close to the password field

Password input

Provide the option to show a password

Reset the password

Explain next steps
Show the confirmation page
Password successfully reset

Ask for account details to verify
FAQs
What is a password input field?
A password input field is a specific type of user interface element used in digital forms or login screens to securely capture and process user passwords. It is designed to accept and store the characters entered by the user for authentication purposes while obscuring the characters from view to protect their confidentiality.
How do you design a secure password input field?
Designing a secure password input field involves considering a few best practices:
- Masking: Password input fields should mask the entered characters to prevent onlookers from viewing the password. Typically, asterisks or dots are used to visually hide the characters as they are typed.
- Validation feedback: Provide clear and immediate feedback on password strength and validity. Display visual cues or indicators to help users create strong passwords and indicate whether the entered password meets the specified requirements.
- Avoid autocomplete: Disable autocomplete and autocorrect features for password fields to prevent browsers or devices from inadvertently storing or suggesting passwords.
Should you display a "Show Password" toggle in the input field?
Including a "Show Password" toggle can enhance usability for users who want to verify the accuracy of their input. It allows them to temporarily reveal the entered password and ensure they have typed it correctly. However, it's essential to balance usability with security concerns. Consider the context and sensitivity of the information involved. For highly sensitive systems, it may be best to exclude the "Show Password" option to minimize the risk of unauthorized viewing.
How should you handle forgotten passwords in the password input field?
To address forgotten passwords, it is essential to provide users with a password recovery mechanism. This can involve options such as password reset via email, security questions, or account recovery through registered contact information. Consider providing clear instructions or a "Forgot Password" link near the password input field to guide users through the recovery process and help them regain access to their accounts securely.
For more tips, check out our Resetting Password lesson.