NWD Password Input (Strength Meter) is the password field Bubble was always missing. Built to replace the native password input, it brings a live strength meter, configurable password policies, and a show/hide toggle together in one polished component. Fully customizable through 60+ properties, giving you complete control over every visual and behavioral detail.
No data collected This plugin does not collect user data.
Minimum and maximum length, lowercase, uppercase, number and special character, each one switched on or off independently. The rule list updates as the user types, and the policy can drive the field's validity or stay purely informative.
Five levels, from Very weak to Very strong, each with its own label and color. The score comes from the password itself, independently of the rules you required, so neither measure hides the other.
An optional eye icon lets the user reveal what they typed, reachable by keyboard and announced as Show or Hide password, with the icon, size and color under your control.
Over 60 properties covering the input, the visibility toggle, the floating rule panel and the strength meter, with panel animations, glass effects and every visual state under your control.
An accessible label and description read by screen readers, the strength level announced as the user types, and reduced motion respected.
Read the password, its strength and which rules are still pending from exposed states, set it or clear it from any workflow with Set value and Reset, and react to value changed.
In detail
Place NWD Password Input wherever the password should be typed. It behaves like a native input: size it and position it with Bubble's own layout.
In PASSWORD POLICY > # Rules, switch on the requirements you want and set Minimum length. Leave Maximum length at 0 for no upper limit.
Pending policies make the input invalid? decides whether an unmet rule makes the field invalid, or whether the list is only guidance. Turn it off when the policy is advisory and your own workflow decides what to accept.
Each rule has its own label in # Labels. The `{n}` in the length labels is replaced by the number you set, so "At least {n} characters" reads "At least 8 characters" to the user.
In FLOATING PANEL, pick when the panel opens: on focus, on focus until every rule is met, or never. Then pick where it opens. The automatic positions flip the panel when there is no room below.
STRENGTH METER has one label and one color per level. The five bands are fixed at 0-20, 21-40, 41-60, 61-80 and 81-100 percent, and the plugin picks the band from the typed password.
Use the exposed states to drive the rest of the page: value for the password itself, is valid to enable a submit button, and strength percent or strength label to show your own feedback elsewhere.
The password policy and the strength meter are independent measures. A password can satisfy every rule you required and still score low on strength, or score high and fail a rule. Use Pending policies make the input invalid? to decide which of the two gates your form.
Text displayed in the input while it has no value.
defaultEnter your password...
Color of the placeholder text.
default#AAAAAA
Tells the browser whether to suggest a new password or fill a saved one.
new-passwordtells the browser this is a password being created, so it offers to generate one instead of filling the saved one. Use it in sign-up and change-password forms.current-passwordtells the browser this is an existing password, so the password manager offers to fill it. Use it in sign-in forms.offasks the browser not to interfere. Browsers do not always honor it, and turning autocomplete off on a password field is usually worse for the user than leaving it on.defaultnew-password
Controls whether the input icon is displayed.
defaultno
Icon displayed in the input.
locka filled padlock.lock outlinea padlock drawn in outline.keya filled key.key outlinea key drawn in outline.shielda filled shield.shield outlinea shield drawn in outline.shield checka filled shield with a check inside.shield check outlinethe same shield and check, in outline.defaultlock outline
Icon size in pixels. When empty, it is calculated from the input font size.
defaultno default
optionalColor of the input icon.
default#AAAAAA
Shows the eye icon that reveals or hides the password.
defaultyes
Eye icon style. Each style has an open and a crossed-out version.
eye outlinean eye drawn in outline.eye thinthe same eye with a thinner stroke.eye bolda heavier stroke, for small sizes or low contrast.eye filleda solid eye.defaulteye outline
Eye icon size in pixels. When empty, it is calculated from the font size.
defaultno default
optionalEye icon color.
default#AAAAAA
Minimum number of characters. Use 0 to disable this policy.
default8
Maximum number of characters. Use 0 to disable this policy.
default0
Requires at least one lowercase letter.
defaultyes
Requires at least one uppercase letter.
defaultyes
Requires at least one number.
defaultyes
Requires at least one special character (any character that is not a letter, number or space).
defaultyes
When enabled, a filled password is only valid when all active policies are met.
defaultyes
Title shown above the policy list.
defaultPassword must contain:
Minimum length policy label. {n} is replaced by the minimum length.
defaultAt least {n} characters
Maximum length policy label. {n} is replaced by the maximum length.
defaultUp to {n} characters
Lowercase policy label.
defaultOne lowercase letter (a-z)
Uppercase policy label.
defaultOne uppercase letter (A-Z)
Number policy label.
defaultOne number (0-9)
Special character policy label.
defaultOne special character (! @ # ...)
Policy title color. When empty, uses the element font color.
defaultno default
optionalIcon pair used for completed and pending policies.
check / circlea check for the rules already met, an empty circle for the ones still pending.check circle / circlea check inside a circle for met rules, an empty circle for pending ones.check / xa check for met and an x for pending. States the failure instead of leaving it open, which reads harsher while the user is still typing.check / dota check for met and a dot for pending, the quietest of the four.defaultcheck / circle
Icon and text color of pending policies.
default#AAAAAA
Icon and text color of completed policies.
default#2EB872
Defines when the strength and policy panel is shown.
on focusthe rule panel opens when the field receives focus and closes when it loses focus.on focus until validthe same, except the panel stops opening once the password satisfies every active rule. Useful when the list has served its purpose and would only add noise.neverthe panel never opens. Use it when you show the rules yourself, from the exposed states.defaulton focus
Preferred or forced opening direction of the floating panel relative to the input.
auto-topopens above the field, and flips below when there is no room.auto-bottomopens below the field, and flips above when there is no room.topalways above, even when it overflows the visible area.bottomalways below, with the same caveat.defaultauto-bottom
Opening animation of the floating panel.
nonethe panel appears with no animation.dropfalls into place from above.elasticovershoots slightly and settles.expandgrows from the field's edge.fadefades in, the quietest option.popscales up quickly from the center.slideslides in from the field's side.zoomscales from small to full size.defaultfade
Background color of the floating panel.
default#FFFFFF
Border color of the floating panel.
default#DEDEDE
Intensity of the glassmorphism effect on the floating panel.
nonea solid background, using the panel color as it is.subtlea barely perceptible blur of what is behind.lighta light blur.mediuma moderate blur, the usual choice when the page behind has imagery.stronga heavy blur.intensethe heaviest blur, where almost nothing behind stays readable.defaultnone
Shows the strength bar and label in the panel.
defaultyes
Title displayed above the strength bar, next to the strength level.
defaultPassword strength
Font color of the strength title.
default#AAAAAA
Color of the empty bar segments.
default#EEEEEE
Strength label for 0-20%.
defaultVery weak
Strength color for 0-20%.
default#FF6666
Strength label for 21-40%.
defaultWeak
Strength color for 21-40%.
default#FF9F43
Strength label for 41-60%.
defaultFair
Strength color for 41-60%.
default#F5C542
Strength label for 61-80%.
defaultStrong
Strength color for 61-80%.
default#66CC88
Strength label for 81-100%.
defaultVery strong
Strength color for 81-100%.
default#2EB872
Disables the component, preventing any interaction.
defaultno
Input background color when disabled.
default#F4F4F4
Input border color when disabled.
default#CACACA
Input font color when disabled.
default#CACACA
This color applies to the password the user typed, not to the placeholder. A disabled field with nothing in it keeps the placeholder color you set in INPUT > # General.
Marks the field as required and enables input validation.
defaultno
Input background color when invalid (required with no value).
default#FFF8F8
Input border color when invalid (required with no value).
default#FF6666
Input background color when focused.
default#FFFFFF
Input border color when focused.
default#30B3FE
Name read by screen readers. When empty, uses the placeholder or the visible label.
defaultno default
optionalHint read by screen readers after the name. Empty for none.
defaultno default
optionalValues the element exposes for the rest of the page to read.
Current password.
Password strength from 0 to 100.
Label of the current strength range.
Labels of all active password policies.
Labels of the password policies already met.
Labels of the password policies not met yet.
Whether the input accepts interaction.
Whether the input is required.
Whether the value is valid, considering the required state and the active policies.
Whether the input is focused.
Where a workflow can start.
Triggered when the password is confirmed with a different value, when leaving the input, pressing Enter or resetting the element.
What a workflow can tell the element to do.
Clears the password, hides it again and resets the touched state.
Focuses the password input.
Writes a password into the field from a workflow and refreshes the strength meter, the policy list and the exposed states.
Yes applies the value even while the element is disabled. No makes the action do nothing in that state.
defaultno default
The password to write into the field; an empty value clears it. The strength meter, the rule list and the exposed states are all recalculated from it. This exists for the case where your app generates a password that satisfies the policy configured above, which the browser's own generator cannot know. It is not meant for storing a password and writing it back later.
defaultno default
optionalNo. Everything happens in the browser: the value, the strength calculation and the policy check never leave the page. The password only goes somewhere when your own workflow sends it.
From the typed password itself, independently of the policy you configured. Length is worth up to 60 points, 3 per character up to twenty characters, except that the counted length is also capped at twice the number of distinct characters, so `aaaaaaaa` does not score like a long password. Variety is worth the other 40, with 10 points for each class present: lowercase, uppercase, number and special character. That is why a password can be strong and still fail a rule you required, or meet every rule and still score low.
Yes. Turn off Pending policies make the input invalid? and the rule list keeps updating as the user types, while the field stays valid. Your workflow then decides what to accept.
Active lists the rules you switched on. Completed lists the ones the current password already satisfies, and pending the ones it does not. The three are text states, so you can show them anywhere on the page.
Because the two do different things with a secret. A default value is an expression that lives in the page definition and is evaluated on every load, which means your app has to be holding the password in plain text to have something to put there. Set value is an explicit, momentary action, and it exists for one case: your app generates a password that satisfies the policy you configured here, which the browser's own generator cannot know about. If what you want is the field to start with the password the person already has, that is the password manager's job: set Browser autocomplete to current-password and the browser fills it, without your app ever seeing it.
Because a password that cannot be seen is a password that gets mistyped, and the error is invisible to the person typing. Letting the user reveal what they wrote is a recommended practice, and the toggle can be switched off when your context forbids it.