Password Reveal
Add elegant show/hide toggle buttons to all password fields instantly—zero configuration, full customization.
5
Rating
47
Installs
v1.1.2
Version
Password Reveal automatically detects all password input fields in your Bubble app and adds customizable show/hide toggle buttons inside each field. Simply drag the element onto your page, configure the icon appearance, and the plugin handles everything else—including fields inside repeating groups, popups, and dynamically loaded content.
The plugin continuously monitors your page for new password fields and automatically attaches toggle buttons, ensuring consistent functionality across your entire application without any manual setup.
When to Use
Everything you need in a single plugin
Login and Registration Forms
Help users avoid typos and failed login attempts by allowing them to verify their password before submitting. Reduces password reset requests and improves conversion rates.
Password Reset Flows
Enable users to see their new password when resetting or changing credentials. Ensures users know exactly what password they're setting, improving security and reducing confusion.
Account Settings Pages
Make it easier for users to update passwords confidently in account settings. Reduces errors when entering complex passwords and improves user experience in sensitive areas.
Multi-Step Forms
Maintain password field consistency across form steps with automatic toggle buttons. Works seamlessly with conditional visibility and navigation without additional configuration.
Benefits
Everything you need in a single plugin
Zero Configuration
Works automatically with all password fields on the page. No need to manually add toggle buttons to each field—just drop the element and configure once.
Dynamic Detection
Automatically finds new password fields added after page load. Works perfectly with repeating groups, popups, conditionals, and dynamically loaded content.
Fully Customizable
Choose any icon library (Font Awesome, Material Icons, Bootstrap Icons) with custom colors and sizes to match your app's design perfectly.
Smart Positioning
Toggle buttons automatically position themselves inside input fields and adapt to size changes, window resizing, and responsive breakpoints.
Better User Experience
Users can verify passwords before submitting, reducing typos, failed logins, and abandoned signups. Especially helpful on mobile devices.
Mobile Friendly
Works perfectly on touch devices with appropriately sized touch targets. Tested across desktop, tablet, and mobile browsers.
No Conflicts
Works alongside other plugins and Bubble's native elements without interference. Clean code with proper cleanup when removed from page.
Accessibility Improvement
Helps users with cognitive or visual challenges verify password entries. Reduces frustration and improves overall form accessibility.
Key Features
Everything you need in a single plugin
Automatic Field Detection
- Scans page for all password input fields on load
- Uses MutationObserver to detect dynamically added fields
- Works with fields in repeating groups and conditionals
- No manual configuration or workflow actions required
Customizable Icons
- Support for any icon library (Font Awesome, Material Icons, Bootstrap Icons)
- Separate icons for show and hide states
- Custom icon color with hex, RGB, or CSS color names
- Adjustable icon size (recommended 16-32 pixels)
Smart Layout Handling
- Automatically positions toggle inside each field
- Adjusts field padding to prevent text overlap
- Uses ResizeObserver to handle size changes
- Responds to window resize and responsive breakpoints
State Management
- Tracks show/hide state for each field independently
- Maintains focus during toggle (no typing interruption)
- Preserves state until page reload or field removal
- Clean data attribute management
Performance Optimized
- Efficient DOM observation with requestAnimationFrame
- Minimal performance impact even with many fields
- Proper cleanup prevents memory leaks
- Works smoothly on low-end devices
Invisible Element
- Plugin element is completely hidden from view
- Only toggle buttons are visible to users
- Zero visual footprint on your page layout
- Professional, unobtrusive implementation
Common Questions
Everything you need to know before installing
Does the plugin work with all icon libraries?
Yes, Password Reveal works with any icon library that uses CSS class names, including Font Awesome, Material Icons, Bootstrap Icons, and custom icon fonts. Just provide the appropriate class names in the configuration.
Can I use it in repeating groups?
Absolutely. The plugin automatically detects password fields inside repeating groups and adds toggle buttons to each instance. It works seamlessly with dynamic content and conditionals.
Will it affect my app's performance?
No, the plugin is highly optimized and has minimal performance impact. It uses efficient DOM observation techniques and proper cleanup to ensure smooth operation even with many password fields.
Do I need to add workflows or actions?
No, the plugin works completely automatically. Just drag the element onto your page, configure the icon properties, and it handles everything else without any workflows or actions.
Does it work on mobile devices?
Yes, the plugin is fully responsive and works perfectly on mobile, tablet, and desktop devices. The toggle buttons are appropriately sized for touch interactions.
Can I customize the icon appearance?
Yes, you can customize the icon library, icon names, color, and size to match your app's design. The plugin supports any CSS color format and flexible icon sizing.
How many Password Reveal elements do I need?
You only need one Password Reveal element per page. It automatically detects and manages all password fields on that page, including those in repeating groups and popups.
Does it store or transmit password values?
No, the plugin only toggles the visual display of password text between hidden and visible. It does not store, transmit, or access password values in any way.
What happens when the element is removed?
The plugin performs complete cleanup when removed: disconnects observers, removes toggle buttons, clears event listeners, and restores original field padding. No memory leaks or orphaned elements.
Can I use different icons for different fields?
The plugin applies the same icon configuration to all password fields on the page. If you need different icons for specific fields, place multiple Password Reveal elements on different pages.