How to show and hide password using JavaScript

Tech Area
Last updated on: January 8, 2026

In this tutorial, We will learn how to show hide password using JavaScript. We will add the toggle password feature using JavaScript. While filling up a password, and want to see what we have typed till now. To see that, there is a show/hide toggle image which makes the characters visible.

Files used in this tutorial:

1- index.php (password field with show-hide toggle image)

2- style.css

This screenshot shows the input field password with show-hide toggle image.

Below are the step by step process of how to use show hide toggle image using JavaScript.

Step 1: Create index.php

In this step, create a new file index.php. This is the main file used for input field password and show hide toogle image using JavaScript.

index.php

<html>  
<head>  
    <title>Show-Hide Password</title>  
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  
    <div class="box">
       <input type="password" name="pwd" id="pwd" placeholder="Enter Password">
       <img src="not-visible.png" class="eye" id="eye" onclick="toggle()">
    </div>
 </body>  
</html>
<script type="text/javascript">
    function toggle()
    {
        let eye = document.getElementById("eye");
        let pwd = document.getElementById("pwd");

        if(pwd.type== 'password')
        {
            pwd.type = "text";
            eye.src = "visible.png";
        }
        else
        {
            pwd.type = "password";
            eye.src = "not-visible.png";
        }
    }
</script>

Step 2: Create style.css

 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:250 auto;
  display: flex;
 }
 .box input
 {
    width: 100%;
    outline:0;
    border: 0;
    padding: 10px 0;
    font-size: 22px;
    background-color:#f9f9f9;
 }
 .eye
 {
   height: 46px;
   cursor: pointer;
 }