General Setup Step Instructions
1 Install the plugin and add the Password Toggle element to your Web page or Mobile view.
2 Set the element width and height according to your application layout.
3 Configure the placeholder field, for example: Password or Enter your password.
4 Select the desired visibility icon using Icon Type: Eye, Lock, or Key.
5 Customize the password field using the available text, background, border, size, and icon settings.
6 The plugin includes its own password input field. A separate Bubble password input is not required.
7 Use the element's password_value state whenever you need the password entered by the user.
8 Use the togglepassword state whenever you need to determine whether the password is currently visible or masked.
9 The plugin automatically detects the appropriate environment. No manual Web or Mobile mode selection is required.
Web Usage
Step Instructions
1 Add the Password Toggle element to your Bubble Web page.
2 Configure the placeholder, colors, border radius, font size, input height, icon type, icon color, and icon size as desired.
3 The plugin automatically renders its Web-compatible password input. No additional configuration is required.
4 The password is masked by default. Click the icon on the right side of the field to reveal the password.
5 Click the icon again to mask the password.
6 The value entered by the user is automatically exposed through the password_value state.
7 Use Password Toggle's password_value as the password value in login, signup, authentication, validation, or other workflows.
8 A separate Bubble password input is not required.
BubbleGo / Mobile Usage
Step Instructions
1 Add the Password Toggle element to your Bubble Mobile view.
2 Configure the placeholder, colors, border radius, font size, input height, icon type, icon color, and icon size as desired.
3 The plugin automatically uses its native mobile implementation when running in BubbleGo or a Bubble Mobile application.
4 The password is securely masked by default using the native mobile password input behavior.
5 Tap the icon on the right side of the password field to reveal the entered password.
6 Tap the icon again to mask the password.
7 The value entered by the user is automatically exposed through the password_value state.
8 Use Password Toggle's password_value wherever your mobile workflow requires the entered password.
9 No external password input, DOM configuration, or manual platform selection is required.
Login Workflow Example
Setting Value
Action Log the user in
Email Your Email Input's value
Password Password Toggle's password_value
Signup Workflow Example
Setting Value
Action Sign the user up
Email Your Email Input's value
Password Password Toggle's password_value
Exposed States
State Usage
password_value Contains the current password entered by the user. Use this value in login, signup, authentication, validation, or other workflows.
togglepassword Returns yes when the password is visible and no when the password is masked.
Important Notes
Topic Instructions
Built-in Password Input The current version includes its own password input field. A separate Bubble password input is not required.
Web Support On Web, the plugin automatically uses a browser-compatible password input.
Mobile Support On BubbleGo and Bubble Mobile, the plugin automatically uses a native mobile password input.
Password Value Use the password_value state whenever you need to access the password entered by the user.
Password Visibility The togglepassword state indicates whether the password is visible or masked. Changing visibility does not change the actual password value.
Platform Detection Web and Mobile environments are detected automatically. No platform configuration is required.
Icon Types Eye, Lock, and Key styles are available for the password visibility control.
Legacy idtoggle Field The idtoggle field is retained for compatibility with previous versions. It is not required when using the current built-in password input.