Add a visual password strength indicator to your Bubble registration form using regex conditions to check for length, uppercase letters, numbers, and special characters. Display a color-coded strength bar that updates in real time as the user types, improving security and reducing weak password submissions.
Overview: Adding a Password Strength Indicator in Bubble
This tutorial shows you how to add a password strength meter to your Bubble app's signup form. You will use dynamic expressions with regex to check password criteria (length, uppercase, lowercase, numbers, symbols), display a color-coded strength bar that updates in real time, and prevent form submission until the password meets your minimum requirements.
Prerequisites
- A Bubble account with an existing app
- A signup or registration page with a password input
- Basic understanding of Bubble conditionals and dynamic expressions
- Familiarity with the Bubble Design tab
Step-by-step guide
Set up the password input and custom state
Set up the password input and custom state
On your signup page, ensure you have a Password Input element (set the content format to Password). Add a Custom State on the page called password_score (type: number, default 0). This score will range from 0 to 5 based on how many criteria the password meets. The score updates dynamically as the user types.
Expected result: A password input exists with a custom state ready to track the strength score.
Create the strength calculation with conditionals
Create the strength calculation with conditionals
Add a hidden Group element. On it, create five conditions that each check one criterion using the password input's value. Condition 1: When Input Password's value's character count >= 8 (length check). Condition 2: When Input Password's value contains any uppercase letter (use :extract with Regex [A-Z] to check). Condition 3: When Input Password's value contains any lowercase letter. Condition 4: When Input Password's value contains any digit [0-9]. Condition 5: When Input Password's value contains any special character. For each matching condition, increment a score using a Do when condition is true workflow that recalculates password_score.
Pro tip: An alternative approach: instead of individual conditions, use a single expression that counts matched regex patterns and stores the total.
Expected result: The password_score custom state reflects how many criteria (0-5) the current password meets.
Build the visual strength bar
Build the visual strength bar
Below the password input, add a Group with Row layout, fixed height of 6px, and light gray background. Inside it, add a second Group (the fill bar) with dynamic width: password_score / 5 * 100 percent. Add conditionals on the fill bar: When password_score <= 1, background = red (#EF4444). When password_score is 2, background = orange (#F97316). When password_score is 3, background = yellow (#EAB308). When password_score is 4, background = light green (#84CC16). When password_score is 5, background = green (#22C55E).
Expected result: A color-coded bar below the password input grows and changes color as the password gets stronger.
Add text labels for each criterion
Add text labels for each criterion
Below the strength bar, add five Text elements showing each criterion: At least 8 characters, One uppercase letter, One lowercase letter, One number, One special character. Add a conditional to each: when the criterion is met, change the text color to green and add a checkmark prefix. When not met, keep it gray. This gives users clear guidance on what to improve.
Expected result: Five criteria labels update from gray to green with checkmarks as each requirement is satisfied.
Block form submission for weak passwords
Block form submission for weak passwords
On the Submit or Sign Up button, add an Only when condition: Only when password_score >= 3 (or your preferred minimum). When the condition is not met, the button is either hidden or disabled. Add a conditional on the button: When password_score < 3, change the background to gray and set This element is not clickable to yes. Display a helper text: Password must meet at least 3 of the 5 criteria. For complex auth flows requiring enterprise-grade security, consider reaching out to RapidDev.
Expected result: The signup button is disabled until the password meets the minimum strength requirement.
Complete working example
1PASSWORD STRENGTH INDICATOR — WORKFLOW SUMMARY2=================================================34PAGE CUSTOM STATE:5 password_score (number, default 0)67ELEMENTS:8 Input Password (Password type)9 Group Strength Bar Container (Row, 100% width, 6px height, gray bg)10 Group Strength Fill (dynamic width, conditional colors)11 Text: "At least 8 characters" (conditional green/gray)12 Text: "One uppercase letter" (conditional green/gray)13 Text: "One lowercase letter" (conditional green/gray)14 Text: "One number" (conditional green/gray)15 Text: "One special character" (conditional green/gray)16 Text: Strength label (Weak/Fair/Good/Strong/Excellent)1718STRENGTH CALCULATION:19 Score = count of these conditions that are true:20 1. Input Password's value:number of characters >= 821 2. Input Password's value:extract with Regex [A-Z]:count > 022 3. Input Password's value:extract with Regex [a-z]:count > 023 4. Input Password's value:extract with Regex [0-9]:count > 024 5. Input Password's value:extract with Regex [!@#$%^&*]:count > 02526WORKFLOW: Update score on input change27 Event: Do when condition is true28 Condition: Input Password's value is not empty29 Run every time: yes30 Action: Set state password_score = 31 (length >= 8 ? 1 : 0) +32 (has uppercase ? 1 : 0) +33 (has lowercase ? 1 : 0) +34 (has digit ? 1 : 0) +35 (has special ? 1 : 0)3637CONDITIONALS ON FILL BAR:38 Width: password_score / 5 * 100 %39 Score 0-1: red (#EF4444) — Weak40 Score 2: orange (#F97316) — Fair41 Score 3: yellow (#EAB308) — Good42 Score 4: green (#84CC16) — Strong43 Score 5: green (#22C55E) — Excellent4445SUBMIT BUTTON:46 Only when: password_score >= 347 Conditional: score < 3 → gray, not clickableCommon mistakes when adding a password strength indicator in Bubble
Why it's a problem: Only checking password length without complexity requirements
How to avoid: Check multiple criteria: length, uppercase, lowercase, numbers, and special characters for meaningful strength assessment.
Why it's a problem: Using contains text instead of regex for character class checks
How to avoid: Use extract with Regex with patterns like [A-Z], [0-9], [!@#$%^&*] to check for character classes.
Why it's a problem: Not recalculating the score as the user types
How to avoid: Use Do when condition is true with Run every time checked, or use an input's value change event to recalculate on each keystroke.
Best practices
- Check at least four criteria: length, uppercase, lowercase, numbers, and special characters
- Use color-coded visual feedback (red to green) for intuitive strength communication
- Show individual criterion status so users know exactly what to improve
- Disable the submit button until minimum strength is met
- Set a minimum length of 8 characters as the baseline requirement
- Update the strength indicator in real time as the user types
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io signup form and want a password strength indicator that checks length, uppercase, lowercase, numbers, and special characters. How do I use regex conditions, build a color-coded strength bar, and prevent weak password submission?
Add a password strength indicator to my signup page. Check for length >= 8, uppercase, lowercase, numbers, and special characters using regex. Display a color-coded bar that updates as the user types and disable the signup button until the password is strong enough.
Frequently asked questions
Does Bubble have a built-in password strength checker?
No. Bubble only enforces a minimum password length in its authentication settings. You need to build the visual indicator and complexity checks yourself using conditionals and regex.
Can I require all five criteria to be met?
Yes. Change the submit button condition to Only when password_score is 5. You can also set it to any threshold that matches your security policy.
How do I check for special characters with regex?
Use the extract with Regex operator with a pattern like [!@#$%^&*()_+\-={}|:"<>?,./] to check for common special characters.
Will this slow down the page?
No. All checks are client-side operations using custom states and conditionals. They do not create database queries or consume workload units.
Can I customize the minimum password requirements?
Yes. Adjust the threshold on the submit button condition (e.g., score >= 4 for stricter requirements) and update the helper text accordingly.
Can RapidDev help with authentication security?
Yes. RapidDev specializes in Bubble development and can help implement comprehensive security including password policies, two-factor authentication, session management, and security audits.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation