I have an email and password field on the sign up form. A password rule text and a show password checkbox appear below the password field.

The rules for showing the div containing password hint text and checkbox is follows:

• As soon as the user focuses out(tabs out) of the password field after entering a valid password, the password tip should hide

• Another rule is, as long as the password does not match the rules, show the password tip

• When we click on the "Show password" checkbox or the "Sign up" button after entering a valid password, the focus shifts to the checkbox or button and since the password is valid as per the rules, it hides the password tip. Is there a better user experience for show password behaviour?

  • 1
    I am not sure why you needed to put the code here ? I would recommend deleting the code from the question
    – Mervin
    Commented Sep 26, 2012 at 19:29

2 Answers 2


There is, imho, a better way to show this. Instead of a checkbox you could implement the style of Windows 8 (formerly known as Metro). They add a little eye to the right of the field, and when you press and hold, you see the password. Otherwise you see the usual bullits *******

The Windows 8 show password looks like this:

enter image description here

From security point of view, implement show password in the client only - never on server side.


I would recommend showing the password tip at all times. The reason being you would reduce potential frustration by providing a intial input or help to the user while he is logging in. Here is an example of how Yahoo keeps the password help at all times:

enter image description here

Though I agree the above case is for a sign up page, it can be extended to your application as it would keep the user informed about what his password must have been.

However if you do feel you need to keep the tool tip hidden due to space constraints, I would recommend keeping it active even when the password is shown since I would like to see what is wrong with my password that the error message is being thrown.

I would also recommend looking at this question Would it be bad design (and unsafe) to put password guidelines next to a login box?

  • great reference! How do you think "show(masked) password" feature should be integrated with the password fields?
    – neelmeg
    Commented Sep 26, 2012 at 19:43
  • Integrated as in?
    – Mervin
    Commented Sep 26, 2012 at 19:49
  • Do I club the show password checkbox along with the password rules or display it separately in a different position(not along with password rules)?
    – neelmeg
    Commented Sep 26, 2012 at 19:51
  • You should read this article (smashingmagazine.com/2009/07/07/…) about web form validation.It has some good inputs on where the field validation text should be located. As you would see it is generally inline and if you are going to club the show password checkbox there too, you are going to overwhelm the user with too many options. Keep it seperate
    – Mervin
    Commented Sep 26, 2012 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.