How to add a password strength indicator in Bubble

The simplest way to add a password‑strength indicator in Bubble is to use a normal Input for the password, then create a few Text elements (or a colored shape/progress bar) whose conditions change based on the password Input’s value. You check things like length, uppercase letters, numbers, symbols using Bubble’s “Extract with Regex” and “:formatted as text” features, and show different messages or colors depending on which rules the password meets.

Practical Step‑by‑Step

Below is a clear way to do it without plugins and using only real Bubble features.

• Create an Input element for the user’s password. Set Content format to Password.
• Add a Text element (this will show the indicator), or add a Shape if you want a color bar.
• On that Text or Shape, use Conditional tab to change its text or color depending on password strength.

The conditions rely on length and Regex checks. Bubble supports Regex inside “Extract with Regex”. For example:

• Check length: Input Password's value:count > 7
• Check uppercase: Input Password's value:extract with Regex [A-Z] is not empty
• Check number: Input Password's value:extract with Regex [0-9] is not empty
• Check symbol: Input Password's value:extract with Regex [^A-Za-z0-9] is not empty

Example Conditions

For a Text element named “Strength Label”, you can add:

• When length < 6 → Text: “Weak” and color red.
• When length ≥ 6 AND has uppercase OR number → “Medium” and color orange.
• When length ≥ 8 AND has uppercase AND number AND symbol → “Strong” and color green.

If you use a Shape (progress bar style), set conditional background colors the same way.

Example Bubble Expression

// Check if password has a number
Input Password's value:extract with Regex [0-9]

If the expression returns a non-empty result, the password includes that character type. You can stack conditions to create a simple but reliable strength indicator fully inside Bubble without plugins.