Getting Started
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.
Install Instructions ✍️
1. Add the booster script to your 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/boosters-password-visibility-control@1.0.0/dist/password-visibility-control.min.js" type="text/javascript"></script>2. Add a div-block that wraps your password field
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.
3. Add the main booster attribute
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.
4. Adding the password toggle wrapper
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.
5. Add the password hide & show buttons
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:
- Show Password Button:
Add the attribute Name:fb-password-stateand Value:hidden. This button will only be visible when the password is hidden. - Hide Password Button:
Add the attribute Name:fb-password-stateand 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.
6. Publish & Test
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.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
Add this booster + more with the official webflow application.
Join our community and
claim free products
No Spam. Only sweet content and updates of our products.
Join 55,000+ other creators in our community
