You might have come across this functionality in so many websites, where you see a toggle button that toggles the password visibility for you.
Some websites have this as a "Show Password" button, some have a "Password Eye" icon which suggests you can click or hover over it and you will be able to see the password you typed.
This "Toggle Password Visibility" is an amazing functionality when you have to give a final look at the password that you just typed.
This toggle button for the password field becomes even more important when we are using mobile devices.
So, now that we know the benefit that this password toggle button gives us, let's see how we can create one for our website.
Surprisingly, it's very simple and in this post, we will create one step by step.
First, we will create the HTML for the label and the password field.
The HTML looks like this:
The HTML is very simple and clear. Note that we are using the input type of password for the password field. This is industry standard and every time you design something that takes sensitive information, the use of an input type of password is recommended.
Now, we will add some CSS to it to make it visually more attractive (even for this blog post :))
The CSS looks like this:
The CSS for these two elements is fairly simple as well and we are doing nothing related to the toggle password functionality at the moment.
Now, we will add a button that will toggle our password.
There is no right or wrong way to add a show password button to your website.
Go with however it suits you and matches the overall design of your website.
In this blog post, I am going for an eye button that sits right at the end of the password field.
The HTML will be changed to this:
It is still straightforward.
I am adding two images, one of the closed eye and one of the open eye and I will place them at the end of the password field with the help of some CSS.
The CSS has been updated to:
With the help of the above HTML and CSS, we are able to achieve this:
At the moment, both the icons sit on top of each other.
Let's create two more classes, hide and show and create the CSS for these two:
I will now give the hide class to one of the images (the one with the eye open).
The updated HTML looks like this:
Then we create an event listener to the anchor element which we are treating as the toggle button.
On the click of that button, we will change the type of the input field from password to text and then back to password.
This is were the secret to the toggle password functionality lies.
Different websites uses different ways to toggle, some toggle just on the hover of the mouse, some on the click.
Along with changing the type of the password field, we are hiding and showing the icons of the eye and toggling between open eye and closed eye.
The icons have been taken from Flat Icons.