Password Input (Mobile) is designed for sign-in, sign-up, password reset, account security, and other Bubble native mobile workflows that need a configurable password field. It combines native secure-entry behavior, local validation, visibility controls, password-strength feedback, responsive styling, accessibility, motion, states, events, and workflow actions in one element.
## Demo App
A configured test app is available for reviewing the Password Input (Mobile) plugin setup, validation, visibility controls, strength feedback, styling, states, events, actions, and native mobile behavior.
.................
**Bubble Editor Test App:**
https://bubble.io/page?id=ankhsmobile&app_type=mobile&tab=Design&name=Password+Input&type=page&elements=bTInR**Public Run-Mode Demo:**
https://ankhsmobile.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Password%20InputThe test view is named **Password Input**. Use the editor link to inspect configuration and workflows, and use the public run-mode link to preview the mobile demo. The same public run-mode URL is configured in the Marketplace Demo page field.
.................
## Quick Start
1. Add **Password Input** to a Bubble native mobile view.
2. Set **Behavior - Password use** for the intended workflow.
3. Configure any required validation rules.
4. Choose the visibility control type and style.
5. Configure the optional password-strength indicator.
6. Style the input shell, text, layout, colors, and motion.
7. Use the plugin states, events, and element actions in your Bubble workflows.
For final testing, use BubbleGo and real iOS or Android devices because native keyboard, autofill, secure text, accessibility, and lifecycle behavior cannot be fully represented by a desktop browser preview.
## Password Use and Autofill
Use **Behavior - Password use** to describe the intended password purpose to the device:
* **Current password** for sign-in or re-authentication.
* **New password** for sign-up, password creation, or password reset flows.
* **Do not autofill** when you do not want the plugin to request password autofill behavior.
The plugin also supports Autofocus, Return key type, Blur after submit, Disabled, Required, and optional maximum-length behavior.
## Validation
Validation is local to the plugin runtime. Configure any combination of:
* Minimum length
* Maximum length
* Required
* Require uppercase letter
* Require lowercase letter
* Require number
* Require symbol
Useful validation states include **Password is valid**, **Meets minimum length**, **Contains uppercase letter**, **Contains lowercase letter**, **Contains number**, and **Contains symbol**.
Validation rules and password-strength scoring are separate. A password can satisfy your configured validation rules without receiving the highest strength score. Password strength should be treated as a UX signal, not a guarantee of password security.
## Visibility Control
Enable **Behavior - Show visibility control** when users should be able to reveal or mask the password.
Choose **Visibility - Control type**:
* **Icon** for an eye or eye-off style control.
* **Text** for localized Show and Hide labels.
Icon mode supports Lucide, Google Material Icons, Phosphor, Feather, MingCute, Heroicons, and Solar style choices. Configure the icon size, control color, input-to-control gap, and Left or Right position as needed.
Text mode uses **Visibility - Show text** and **Visibility - Hide text** and can inherit the Bubble font family while using its own optional size and weight.
Some supported non-Lucide icon styles may retrieve SVG artwork from Iconify at runtime. The artwork request identifies the selected icon and includes its configured color and rendered dimensions. The password value is not intentionally included in that artwork URL. If remote artwork is unavailable, the plugin uses its available local or generic fallback path.
## Password Strength
Use **Strength - Indicator** to control visibility:
* **Automatic** shows strength feedback for New password use and hides it for Current password or Do not autofill.
* **Always show** forces the indicator on.
* **Always hide** disables the built-in indicator while strength states remain available for custom Bubble UI.
Choose Above input or Below input positioning and one of five progress styles:
* Flat
* Gradient
* Segmented
* Segmented gradient
* Continuous segmented gradient
You can configure segment count, width, height, corner radius, input gap, alignment, segment gap, track color, and weak, moderate, and strong colors.
The plugin publishes **Password strength score** from 0 to 4 and **Password strength progress** from 0 to 100. Empty passwords have progress 0. Non-empty score levels map to progress values 20, 40, 60, 80, and 100.
## Strength Progress Animation
**Strength - Progress animation** provides 15 choices:
* None
* Smooth
* Spring
* Pulse
* Shimmer
* Bounce
* Ease in
* Ease out
* Ease in and out
* Elastic
* Fade
* Continuous shimmer
* Continuous pulse
* Breathe
* Glow
Use **Strength - Progress animation duration (ms, optional)** when strength feedback needs timing that is independent from the rest of the input. Leave it blank to reuse **Motion - Duration (ms)** for backward-compatible behavior. Set it to 0 for immediate progress updates and to disable continuous decorative strength effects.
Continuous strength effects automatically stop when the indicator is hidden or empty and are disabled when reduced-motion accessibility preferences are active.
## Styling and Layout
Use the dedicated input-shell controls to style the password box without wrapping the separate strength indicator.
Useful settings include:
* Layout - Input height
* Layout - Horizontal padding
* Layout - Vertical padding
* Text - Horizontal alignment
* Text - Direction
* Text - Color
* Text - Font size
* Text - Font weight
* Text - Letter spacing
* Style - Input background
* Style - Input border color
* Style - Input border width
* Style - Input border style
* Style - Input corner radius
* Style - Input shadow
The native password text remains a single-line input. Font family is inherited from Bubble's Font styling. Fixed, Fill, and Fit sizing are supported by the plugin's protected native layout model.
## Motion and Reduced Motion
The plugin includes separate motion choices for visibility changes, typing feedback, focus feedback, clearing the password, supported style transitions, and strength progress.
**Motion - Duration (ms)** controls normal input, visibility, focus, clear, and supported style-transition timing.
**Motion - Style transition** can animate supported visual style changes using None, Smooth, Linear, Ease in, Ease out, or Ease in and out. Structural layout choices remain immediate to protect native input stability.
When the device exposes a reduced-motion accessibility preference, the plugin automatically shortens or disables supported decorative motion.
## Useful States and Events
Important states include:
* Password value
* Password is visible
* Character count
* Input is focused
* Password is valid
* Meets minimum length
* Contains uppercase letter
* Contains lowercase letter
* Contains number
* Contains symbol
* Password strength score
* Password strength progress
* Strength indicator is visible
Available events include:
* when password changes
* when input is focused
* when input is blurred
* when password is submitted
* when password strength changes
The plugin updates the relevant states before the corresponding user-driven events run.
## Workflow Actions
Use the element actions in Bubble workflows:
* **Set password** sets the password programmatically and recalculates validation and strength states.
* **Focus input** moves keyboard focus to the password input.
* **Blur input** removes keyboard focus.
* **Clear password** clears the value and recalculates validation and strength states.
* **Set password visibility** explicitly reveals or masks the password.
* **Toggle password visibility** switches between revealed and masked states.
Programmatic **Set password** and **Clear password** update the related states but do not trigger the user password-changed or password-strength-changed events.
Resetting relevant inputs clears the password and restores masked visibility without generating user-change events.
## Sensitive Password State Guidance
The current password is intentionally exposed through the **Password value** state so your Bubble workflows can use it. Treat this value as sensitive application data. Avoid logging it, storing it unnecessarily, placing it in analytics, or transmitting it to external services unless your application explicitly requires that behavior and handles it appropriately.
Password validation and strength estimation are performed locally by the plugin. The optional Iconify visibility-artwork request does not intentionally include the password contents.
## Device Test Checklist
Before publishing your app, test the configurations you use on both iOS and Android:
* Current password and New password autofill intent
* Empty, focused, typed, masked, and revealed states
* Required and composition validation rules
* Minimum and maximum length behavior
* Show and Hide visibility controls
* Icon and localized text control modes
* Password-strength states and indicator styles
* Strength animation and independent duration
* Reduced-motion behavior
* Fixed, Fill, and Fit sizing
* Input height and horizontal or vertical padding
* Typography, alignment, and text direction
* Focus, blur, submit, Set password, Clear password, and visibility actions
* Navigation away and back
* Multiple Password Input instances when your app uses them
* Non-Lucide icon fallback behavior if your app depends on remote artwork
Built with 🤍 by ANKHARA Studios.
Built on Bubble
