We can implement Show and Hide password easily using Vanilla JavaScript without using any additional library or framework .

HTML setup to implement show & hide password using JavaScript on the click of a button:

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


    <div class="mb-3">
        <label for="inputPassword" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword">
    <button class="btn btn-primary" id='showHidePasswordButton'>Show Password</button>
    <script src="index.js"></script>


In the above HTML, we have an input element whose type is password initially and a button clicking on which we want to either show or hide the text inside the input element. We also wants to change the text of the button based on whether we are currently showing the password or not.

We added id’s to each element so that we can access them from JavaScript file. For styling we used Bootstrap CSS.

JS code:

let showPassword = false;
let myButton = document.getElementById('showHidePasswordButton');

myButton.addEventListener('click', () => {
    if (showPassword) {
        document.getElementById('inputPassword').type = 'password';
        myButton.innerText = 'Show Password'
    } else {
        document.getElementById('inputPassword').type = 'text';
        myButton.innerText = 'Hide Password'
    showPassword = !showPassword;

To show or hide the password we can simply change type of the input element from password to text or text to password. We are doing it by changing the value of the type property of the input element. We also used a variable showPassword based on which we are either showing or hiding the password. Also note how we are changing the text of the button.

HTML setup to implement show & hide password using JavaScript on the click of a check box:

In the above example, we are showing or hiding the password on the click of a button. Instead we can use a check box also. If the check box is checked then we show the password and if not checked then we hide it. We can replace the button HTML with the following check box HTML code.

<div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="showHidePasswordCheckBox">
        <label class="form-check-label" for="showHidePasswordCheckBox" id="showHidePasswordCheckBoxLabel"> Show Password

JS Code:

let myCheckBox = document.getElementById('showHidePasswordCheckBox');

myCheckBox.addEventListener('click', () => {

    if (!myCheckBox.checked) {
        document.getElementById('inputPassword').type = 'password';
        document.getElementById('showHidePasswordCheckBoxLabel').innerText = 'Show Password'
    } else {
        document.getElementById('inputPassword').type = 'text';
        document.getElementById('showHidePasswordCheckBoxLabel').innerText = 'Hide Password'


In this code, we accessed the check box and checked whether its checked or not by using the checked property of the check box input element.