Password Strength Meter

A drop-in Reactive Web block that gives users live feedback on how strong their password is as they type — a colored segmented bar, a strength label (Weak → Very strong), and an optional criteria checklist. It raises an event so you can enable your Submit button only once the password is strong enough. Pure client-side: no database, no server calls, no dependencies.

Platform: OutSystems 11 (O11) · Type: Reactive Web · Curation target: Community

1. Overview

Password Strength Meter watches a password value and, in real time, shows how strong it is. It scores the password against five criteria — minimum length, a lowercase letter, an uppercase letter, a number, and a symbol — and reflects the result as a five-segment bar that fills and changes color from red to green, plus a text label and an optional checklist showing which criteria are met.

Beyond the visual, it tells your screen whether the password is acceptable via the OnScoreChanged event, so you can gate the Submit button and stop weak passwords from being submitted.

Key features

• Live strength feedback as the user types.
• Five-segment colored bar (Weak → Very strong).
• Optional strength label and criteria checklist.
• OnScoreChanged event for enabling/disabling Submit.
• Configurable minimum length.
• Accessible (announces changes) and reduced-motion aware.
• Pure client-side — no database, no server code, no dependencies.

2. Compatibility

3. Installation

1. Install Password Strength Meter from the Forge (or the .oap via Service Center).
2. In Manage Dependencies, select the module and check the PasswordStrength block.
3. Apply and publish.

4. Quick start

1. Add a password Input to your screen and bind its Value to a variable, e.g. PasswordValue.
2. Drop the PasswordStrength block below it and set Password = PasswordValue.
3. Handle OnScoreChanged and store its IsStrongEnough parameter in a variable, e.g. CanSubmit.
4. Set your Submit button's Enabled property to CanSubmit.

Input (password)  →  PasswordValue
PasswordStrength   Password = PasswordValue
   OnScoreChanged(Score, IsStrongEnough):  CanSubmit = IsStrongEnough
Submit button      Enabled = CanSubmit

As the user types, the meter updates live and the button enables only when the password qualifies.

5. Reference — the PasswordStrength block

Input parameters

Events

6. How scoring works

The password earns one point for each of these five criteria it satisfies:

The total (0–5) maps to the label and bar:

IsStrongEnough is True when the password meets the minimum length and scores at least 4. This threshold is intentionally reasonable rather than extreme; if you need a stricter or gentler policy, it's a one-line change in the block's logic.

7. Accessibility

The strength label sits in a live region so screen readers announce strength changes as the user types, and the segment animation respects the user's "reduce motion" system preference. The meter is feedback only — it never blocks typing; you decide whether to gate submission via OnScoreChanged.

8. Styling

The component ships with a clean default look and prefixes all its classes with psm-. To restyle, override these in your app theme:

For example, to change the "strong" color, override .psm-strong .psm-seg-on { background: #0ea5e9; }.

9. Troubleshooting / FAQ

The meter doesn't update as I type.Make sure your password Input is bound to a variable and that same variable is passed to the block's Password input. The block recalculates on parameter change, which fires as the bound value updates.

My Submit button never enables.Confirm you're handling OnScoreChanged and setting a variable from IsStrongEnough, and that the Submit button's Enabled is bound to that variable. Also check MinLength isn't higher than the passwords you're testing.

I want a different pass threshold.The "strong enough" rule (length met and score ≥ 4) is a single condition in the block; adjust it to require more or fewer criteria.

The checklist or label is showing when I don't want it.Set ShowChecklist or ShowLabel to False.

10. Best practices

• Use the meter as guidance, not a hard gate on typing — gate the Submit action instead, via OnScoreChanged.
• Set MinLength to match your real password policy.
• Pair it with server-side validation; client-side strength feedback improves UX but is not a security control on its own.
• Keep the criteria text visible (the checklist) so users know how to improve a weak password.

11. A note on scoring depth

This component uses a clear, rule-based score (five criteria) that's easy to understand and explain to users. For a more sophisticated, real-world strength estimate — one that penalizes common passwords, keyboard patterns, and dictionary words — a future version can integrate a library-based estimator (such as zxcvbn) behind the same interface. The rule-based version is a solid, dependency-free default.

12. Version history

13. License

Published on the OutSystems Forge as open, reusable code. Free to use and adapt in your OutSystems projects.