Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 22 Sep, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
Recommended Articles
Page :

Start Your Coding Journey Now!