Show/Hide Password toggle is provided along with the password input field so the user can verify and ensure the typed in password is mistake-free. The user can toggle the visibility of the password field back to hidden so he/she can enter the password securely again. These toggles help in reducing the number of errors made by the user while filling a form. It saves the user a lot of time and makes the process of form-filling much easier.

In today’s tutorial, we create a show/hide toggle for the password field. The button with an ‘eye’ icon acts as a toggle to switch between masked and unmasked password states. For this project, you need basic HTML, CSS, and some easy-peasy Javascript. Let us dive into the coding.

HTML

To begin with, we create a div with the class name wrapper. The purpose of this div is to center and contain the password field along with the toggle button. Next, we add an input element of type password. The difference between text input and password input is that the characters are masked in the input field by replacing them with ‘•’ or ‘*’ symbols.

Lastly, we finish the HTML code by adding a span element containing the eye icon. I have used font awesome icons. But you can use any icon you prefer. Material Icons by Google is another excellent choice.

<div class="wrapper">
    <input type="Password" placeholder="Password" id="password">
    <span>
        <i class="fa fa-eye" id="eye" onclick="toggle()">
        </i>
    </span>
</div>

CSS

Styling the document body:

Now for styling, we add a flat blue color as a background for the HTML document body. As usual, we perform an basic padding and margin reset by setting them both to zero. Performing the reset removes any margins and paddings added by the browser by default.

body{
    background-color: #5887ef;
    padding: 0;
    margin: 0;
}
Centering the Wrapper:

To center the wrapper div, we position it absolutely. We now set the width for wrapper as 300 pixels.

.wrapper{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    width: 300px;
}
Customizing the Input field:

Next, we target the password field using the input selector. To include padding and borders in total width/height of an element, we make use of the box-sizing property. The value of box-sizing is set to ‘border-box’. We use a 100 percent width of the wrapper div for the input field. We then add some box-shadow to give the password field some depth. The font I have used here is ‘Poppins’.

input{
    box-sizing: border-box;
    width: 100%;
    font-size: 18px;
    border: none;
    padding: 10px 10px;
    border-radius: 3px;
    font-family: 'Poppins',sans-serif;
    color: #4a4a4a;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 30px rgba(22,89,233,0.4);
}
Targetting and Styling Placeholder:

To select and style the placeholder using the ‘::placeholder’ selector. We set the color of placeholder to be much lighter than the color of the field.

::placeholder{
    color: #9a9a9a;
    font-weight: 400;
}
Styling The Eye icon:

For the next step, we position the span element towards the right side of the wrapper. To indicate that the span containing icon is clickable, we set the value of cursor attribute to ‘pointer’. Lastly, we set the color and size of the eye icon.

span{
    position: absolute;
    right: 15px;
    transform: translate(0,-50%);
    top: 50%;
    cursor: pointer;
}
.fa{
    font-size: 20px;
    color: #7a797e;
}

Javascript

Moving on to the javascript code, we add an on click event to the eye icon. When the user clicks the eye icon, it executes the ‘toggle()’ function. We create a variable called state with boolean value false. The ‘false’ state indicates that the password is masked. Also, the ‘true’ state means that the password is unmasked.

If block:

If the password is in the unmasked state currently, we set the type attribute of the input element to ‘password’ value. This change in type makes the password hidden. We then set the state to false, which indicates a masked password.

Else block:

Else block: We need the password in unmasked state. We do it by setting the type attribute to ‘text’ value. Lastly, we set the state to true, which indicates an unmasked password.

var state= false;
function toggle(){
    if(state){
	document.getElementById("password").setAttribute("type","password");
	document.getElementById("eye").style.color='#7a797e';
	state = false;
     }
     else{
	document.getElementById("password").setAttribute("type","text");
	document.getElementById("eye").style.color='#5887ef';
	state = true;
     }
}

We now have a sleek and fully functional show/hide password toggle ready. Now you can go ahead and customize the way you like for your website.

I would love to hear your suggestions and feedbacks, so feel free to drop them in the comment box below. Stay tuned for more fun tutorials. Please support me by following me on Instagram or by subscribing to my Youtube Channel.