Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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 a 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 the 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 buttons, 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 the setAttribute() method.

Example 1: In this example, we will see to use toggle password visibility in forms.

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:

In this example, we fetch the password using getAttribute(). This fetching is done when an event (click) is created.



Last Updated : 05 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads