# How to add a password strength indicator in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
PASSWORD STRENGTH INDICATOR — WORKFLOW SUMMARY
=================================================

PAGE CUSTOM STATE:
  password_score (number, default 0)

ELEMENTS:
  Input Password (Password type)
  Group Strength Bar Container (Row, 100% width, 6px height, gray bg)
    Group Strength Fill (dynamic width, conditional colors)
  Text: "At least 8 characters" (conditional green/gray)
  Text: "One uppercase letter" (conditional green/gray)
  Text: "One lowercase letter" (conditional green/gray)
  Text: "One number" (conditional green/gray)
  Text: "One special character" (conditional green/gray)
  Text: Strength label (Weak/Fair/Good/Strong/Excellent)

STRENGTH CALCULATION:
  Score = count of these conditions that are true:
    1. Input Password's value:number of characters >= 8
    2. Input Password's value:extract with Regex [A-Z]:count > 0
    3. Input Password's value:extract with Regex [a-z]:count > 0
    4. Input Password's value:extract with Regex [0-9]:count > 0
    5. Input Password's value:extract with Regex [!@#$%^&*]:count > 0

WORKFLOW: Update score on input change
  Event: Do when condition is true
    Condition: Input Password's value is not empty
    Run every time: yes
  Action: Set state password_score = 
    (length >= 8 ? 1 : 0) +
    (has uppercase ? 1 : 0) +
    (has lowercase ? 1 : 0) +
    (has digit ? 1 : 0) +
    (has special ? 1 : 0)

CONDITIONALS ON FILL BAR:
  Width: password_score / 5 * 100 %
  Score 0-1: red    (#EF4444) — Weak
  Score 2:   orange (#F97316) — Fair
  Score 3:   yellow (#EAB308) — Good
  Score 4:   green  (#84CC16) — Strong
  Score 5:   green  (#22C55E) — Excellent

SUBMIT BUTTON:
  Only when: password_score >= 3
  Conditional: score < 3 → gray, not clickable
```

## Common mistakes

- **Only checking password length without complexity requirements** — A long password of repeated characters (aaaaaaaa) is technically long but extremely weak Fix: Check multiple criteria: length, uppercase, lowercase, numbers, and special characters for meaningful strength assessment.
- **Using contains text instead of regex for character class checks** — Bubble's contains text checks for exact substrings, not character classes. It cannot check for any uppercase letter generically Fix: Use extract with Regex with patterns like [A-Z], [0-9], [!@#$%^&*] to check for character classes.
- **Not recalculating the score as the user types** — If the score only updates on form submission, users get no feedback during password creation Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-a-password-strength-indicator-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-a-password-strength-indicator-in-bubble