#PasswordComplexity

The rules a password has to meet, ticked off as it meets them — show them from the moment the field appears rather than after a failed submit, and keep the same set everywhere a password is created. The component only paints: you compute each rule's met and pass it in, with passwordValidators shipped alongside for that. A satisfied rule is struck through and steps back, so what is left to do is what stands out.

Source · Storybook

#Usage

import { PasswordComplexity } from '@wallarm-org/design-system/PasswordComplexity';

#Examples

#All met

Everything satisfied: green checks with the labels struck through, which reads as done without needing a success message on top.

#Partially met

The state actually seen most of the time. Three rules are struck through and two are not, and the two are what the eye goes to.

#Interactive

Two fields wired to passwordValidators, passwordsMatch included, recomputed on every keystroke — the real-time checking the rules are meant to be shown with.

#Props