Copied to clipboard
Attribute
PRO ONLY
Getting a Suitepro account gives you access to exclusive access to various attributes and scripts.

Show/Hide Password Input

Unleash the power of user-friendly design with our password visibility toggle feature. This compact, yet effective piece of code allows users to control the visibility of their password input, enhancing both usability and security.

See a Demo
Step 1
Add the script

Copy and paste the script in to your Webflow project.

<!-- Suiteflow • Show & Hide Password Input -->
<script defer src="https://cdn.jsdelivr.net/gh/suiteflow/password-show-hide@main/password-show-hide.js"></script>

Add this script to your Webflow project
Copy to Clipboard
Step 2
Add the attributes
Custom Attributes +
Name
suite-password
Copy to Clipboard
Value
input
Copy to Clipboard
Add this attribute to your PAssword Input field.
Custom Attributes +
Name
suite-button
Copy to Clipboard
Value
password
Copy to Clipboard
Add this attribute to your Show/Hide button or text element.
Custom Attributes +
Name
Copy to Clipboard
Value
Copy to Clipboard
Custom Attributes +
Name
Copy to Clipboard
Value
Copy to Clipboard
Need more than one instance, simply number them as shown above.

Example

Interactive and Real-time Feedback:

‍This script offers immediate feedback to users as they type their password into the input field. It dynamically checks the strength of the password and displays a relevant message. This creates a more engaging and interactive user experience, as users can see in real-time if their password meets the required criteria.

‍

Enhances Security:

‍By checking for password strength, the script encourages users to create more secure passwords. It ensures that the password is not too short, and that it contains a mix of uppercase letters, lowercase letters, and numbers. This reduces the risk of weak passwords and improves the overall security of user accounts.

‍

Customizable and Scalable:

‍The script uses data attributes to select password fields and corresponding strength indicators, which makes it easy to implement across multiple password fields and customize according to specific needs. This means it can be scaled up for larger websites with multiple different password input scenarios.

‍

User-friendly:

‍When the input field is empty, the password strength indicator reverts back to its original text, ensuring a clean, user-friendly interface. This helps to prevent any confusion that might be caused by leftover messages from previous input.

‍

Overall, this script is a valuable tool for enhancing user experience and security on any website where password input is required.

‍