Friday, October 10, 2025
HomejQueryRapidly Toggle Password Visibility with Bootstrap5-togglepassword Plugin

Rapidly Toggle Password Visibility with Bootstrap5-togglepassword Plugin


The bootstrap5-togglepassword jQuery plugin attaches a toggle button to the password enter subject that enables the consumer to view or cover the password textual content.

When clicked, the plugin will toggle between masking the password and exhibiting the plain textual content. This offers customers a handy technique to test their password entry for errors earlier than submitting a kind. 

How you can use it:

1. Import the togglepassword.js script into the Bootstrap 5 mission.


<!-- jQuery + Bootstrap 5 -->
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- OPTIONAL Toggle Icons -->
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap-icons.css" />

<!-- Bootstrap5-togglepassword -->
<script src="togglepassword.js"></script>

2. Connect the perform togglepassword to your password subject and specify the CSS class of the password toggle button.


<label class="form-label" for="password">Password</label>
<enter sort="password" class="form-control" id="password" title="password" required>

$(() => {
  $('[type="password"]').togglepassword('btn');
});

This superior jQuery plugin is developed by rienerdparinas. For extra Superior Usages, please test the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments