Add a button to show and hide the password on a Webflow input field
Make your password fields more user-friendly by adding a simple show/hide toggle. This feature lets users easily control the visibility of their passwords as they type, giving them both convenience and security. With this booster, you can quickly set up a button that allows users to reveal or hide their password with a single click.
This Booster can be added directly into your Webflow projects with our official Webflow App. You can install the official Boosters App. The Boosters app will add all the attributes and elements you need directly in your Webflow project.
Copy the script listed below, and add it to the <head>
tag of your custom code settings. If you aren't sure about custom code in Webflow, you can click here to learn more.
<!-- Flowbase Booster [Password Visibility Control] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/[email protected]/dist/password-visibility-control.min.js" type="text/javascript"></script>
To get started, select your input field and wrap it in a ▭ div-block
. For this guide, we’ll name it 'Password Field.' This ▭ div-block
will serve as the main container, where we’ll attach key attributes and position the show/hide buttons.
If you're using the app, the component will automatically come with the necessary attributes, so you can skip these setup steps. Otherwise, add the attributes as described below.
Next, select the 'Password Field' we created in the previous step. You'll need to add the main booster attribute to this element.
Set the attribute Name: fb-password
and the Value true
. This will activate the show/hide functionality for your password input field.
Inside the 'Password Field' div-block, add another div-block that will serve as the container for your show/hide buttons. We'll name this div-block 'Password Toggle.'
Next, assign it the attribute Name: fb-password-toggle
and Value: true
. This setup will ensure that the toggle functionality is properly linked to your password field.
Now, it's time to add the buttons that will control the visibility of the password. Inside the 'Password Toggle' div-block, add two buttons—one for showing the password and one for hiding it. You can style these buttons however you like, such as using traditional eye and eye-closed icons. What's important is that these two buttons are located inside the Password Toggle parent element.
Here’s how to set up the buttons:
fb-password-state
and Value: hidden
. This button will only be visible when the password is hidden.fb-password-state
and Value: visible
. This button will only appear when the password is visible.The script will automatically manage the display state, ensuring a seamless user experience.
Once you've completed the steps above, including adding both the script and the necessary attributes, it's time to publish your page. Head over to your live staging domain to see the Booster in action. Test the show/hide password feature to ensure everything is working smoothly.
Your support means the world to us! In just 10 seconds, you can make a big difference:
Thank you for being awesome! 🌟