Simple revealing and hiding the password in the password field

  1. The problem with masked passwords
  2. Revealing the password
  3. The code
  4. Read more:

The problem with masked passwords

There are numerous usability problems:

  • Not being able to see what characters have been typed,
  • Not being able to check the input,
  • Not being able to correct an error.

For all this user inconvenience there are practically no security benefits at all:

  • How often is someone looking over your shoulder when you type a password?
  • The input isn't secured in any way, it's just a visual representation.
  • Password masking doesn't help prevent attacks from key loggers or malware.

This problem is well presented at

Revealing the password

For better user experience we can add option to reveal typed password.

  • Password is masked at the beginning so no trust issues with the website security,
  • Revealing the password is optional so it depends on voluntary user action,
  • Password can be masked again.

The code

You can find example of form with password field in Basic Project Template available at

Let's add additional checkbox under the password field.

<?= $form->field($model, 'password')->passwordInput() ?>
<?= Html::checkbox('reveal-password', false, ['id' => 'reveal-password']) ?> <?= Html::label('Show password', 'reveal-password') ?>

Now for a bit of JavaScript. The id of password field in the example is loginform-password but you can change it by adding ['id' => 'my-password-field-id'] array in passwordInput() method.

Add this in the view file:


Now, every time "Show password" is checked text inside the password field is unmasked. Unchecking the box makes the text masked again.

Read more: