On the log in form, I want to give users the option to unmask the password field so they can see what they type. The phrase "unmask password" is too technical and its purpose may not be apparent to users. If possible, I'd like to reassure the user their password is still safe (since they may be unused to seeing it in plain text) so I was thinking when the user hovers over the button a message could display "your password will still be secure".

What is the standard terminology for showing the password in plain text? Is there standard position or appearance for a button or link to show the password?


The most effective way that I have seen is to use text. Simply have a checkbox that says "show password" or "hide password". It's clear and everyone understands it.

enter image description here

However, it's also becoming increasingly common to use the eye symbol as "show password", so if I had to chose a symbol and not text, I would use an eye icon.

enter image description here

  • 1
    I agree the eye symbol is becoming common but I don't think it's common enough that most people would know what it's therefore (from the picture it's not intuitive it means "show password"). – Celeritas Apr 25 '13 at 21:17
  • @Celeritas I agree, which is why my first choice is to use text. – JohnGB Apr 25 '13 at 21:18
  • 2
    And if you use an icon, you have to think harder about how to make it accessible. A "Show password" checkbox is very clear and for screen-reader users is very easy to understand. An inline icon will require some fun ARIA tagging and DOM element juggling. – elemjay19 Apr 25 '13 at 21:28
  • Also, the Mac login screen these days has the arrow button that means "log in" in that spot. So expect us confused Mac users to click that out of habit. – uliwitness Apr 25 '13 at 22:57
  • 1
    Now I know what it is supposed to be, I see that someone might portray an eye in this manner, but really, honestly, I would never have recognized that icon as an eye! Let alone have inferred what it was intended to do... – Marjan Venema Apr 26 '13 at 11:40

The checkbox way is simple and effective. But a switch, something like this:

enter image description here

Might just do the work.


'Show Password' accompanied with a checkbox is clearly the standard and the best most effetive way to communicate it even though it's not saving as much space as an icon.

On another note, looking for an example, I just looked at gmail, facebook, instagram, amazon, ebay, trello, yahoo, twitter, codebase and podio and none of them had a 'show password' checkbox. Maybe it's not that crucial after all.

Your Answer

