Password fields usually mask their content, but is that really good UX?
UX challenges of password fields
- User ‘loses their place’ forcing them to start entering the password again.
- Password hard to type or complex, no visual guide to text being entered.
- Difficulty in paste a password from elsewhere.
- Difficult to visually check validity of password before submitting.
- Hard to copy password elsewhere before submitting.
An increasingly common pattern is to allow the user to toggle the visibility of the password field content, which has a number of accessibility benefits.
- Many users have password manager add-ons—such as LastPass—which may adapt the display of password fields, so we have to be careful when it comes to styling the field itself.
- Changing the field
<input type="password" ...>to
- There’s a possibility that the browser could cache or save the state of the field in plain text, which would be a Bad Thing.
Taking point 2, we can be a little smarter about how we handle form submits and ensure we only ever submit password fields, regardless of a toggled display state. This prevents point 3.
By placing the toggle outside of the password field, we can avoid most visual clashes with add-ons or password managers, covering point 1.
A CodePen demonstrating this technique can be found here.