Password Reveal
41
Overview The Nebula – Password Reveal plugin adds a show/hide control to password inputs, enabling users to toggle visibility with a single click. It enhances user confidence, reduces input errors, and integrates seamlessly with Bubble forms. How It Works
Automatic detection: the plugin targets the password input by Element ID.
Inline icon insertion: an eye icon is injected inside the input field for immediate use.
Dynamic toggle: toggles between masked and plain text on click.
Visual customization: icon color, size and position can be adjusted to match your app’s style.
When to Use
Login and registration forms.
Admin panels and restricted areas.
Long password inputs where typos are common.
Apps focused on accessibility and improved UX.
Benefits
Reduces password entry mistakes and support requests.
Improves user confidence during sensitive input.
Lightweight, client-side operation with no backend dependency.
Compatible with both desktop and mobile environments.
Key Features
Real-time visibility toggle for password fields.
Automatic application via Element ID.
Customizable icon (color, size, placement).
No external dependencies or performance impact.
Installation
In the Bubble editor, go to Plugins → Add plugins and install Nebula – Password Reveal.
Add the plugin element to the page that contains the password input.
Configuration
Target ID: set the Element ID of the password input (e.g., password_input).
Icon Size: specify the icon size in pixels.
Icon Color: set the icon color using hex or RGBA to match your theme.
Icon Position: adjust placement inside the input if available in the plugin options.
How to Use
Ensure the password input has a unique Element ID and the plugin element is on the same page.
Configure Target ID and visual settings in the plugin inspector.
The eye icon will appear inside the input; clicking it toggles password visibility.
Best Practices
Use sufficient contrast between the icon and input background for accessibility.
Provide enough right padding on the input so the icon does not overlap typed text.
Match icon styling to the app’s light/dark theme for visual consistency.
Troubleshooting
Icon not appearing: verify the Target ID is correct and the plugin element is present on the page.
Icon misaligned: adjust input padding or icon position settings.
Color not applying: confirm color format (hex/RGBA) and clear any conflicting custom CSS.
Compatibility
Fully compatible with Bubble native inputs.
Supported on modern browsers and mobile devices.
100% client-side; no backend required.
Support
For assistance and updates visit https://nebulapps.com.br.