Skip to content
Related Articles

Related Articles

How to toggle password visibility in forms using Bootstrap-icons ?

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 22 Sep, 2021
Improve Article
Save Article

Passwords are those input types that appear as ******. It can be shown to the user by adding a feature of the eye icon so that the user can see the password.

In this article, we will learn how to toggle password visibility using Bootstrap.

Approach:

  • We will use few classes of Bootstrap-icons – bi, bi-eye-slash, and bi-eye.
  • Toggle these classes using JavaScript.
  • We will toggle the type of input field of password ( text to password and password to text ).

 

Files to be imported:

For the icons in the input field ( Eye Icon)

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css” />

To style form elements, like button, adding padding, etc

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>

Explanation of Javascript Function:

  • We are fetching the id of the password using the getAttribute() method and determining its type. This fetching is done when an event (click) is created.
  • If it is text then convert it into the password.
  • If it is a password then convert it to text.
  • Conversion is done using setAttribute() method.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <title>Toggle Password Visibility</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  
    <style>
        form i {
            margin-left: -30px;
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>Sign In</h1>
        <form>
            <p>
                <label>Username:</label>
                <input type="text" 
                    name="userID" id="userID">
            </p>
  
            <p>
                <label>Password:</label>
                <input type="password" 
                    name="password" id="password" />
                <i class="bi bi-eye-slash" 
                    id="togglePassword"></i>
            </p>
  
            <button type="submit" id="submit" 
                class="btn btn-primary">
                Log In
            </button>
        </form>
    </div>
  
    <script>
        const togglePassword = document
            .querySelector('#togglePassword');
  
        const password = document.querySelector('#password');
  
        togglePassword.addEventListener('click', () => {
  
            // Toggle the type attribute using
            // getAttribure() method
            const type = password
                .getAttribute('type') === 'password' ?
                'text' : 'password';
                  
            password.setAttribute('type', type);
  
            // Toggle the eye and bi-eye icon
            this.classList.toggle('bi-eye');
        });
    </script>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!