PasswordStrengthInfo

Open in Playground

A strength meter with a checklist of rules. Pass the current password. The built-in rules are length (minLength, 8 by default), an uppercase letter, a lowercase letter, a number and a special character; the strength is how many are met, shown as a label (labels renames them, colors recolors the bar) and as a role="meter". showStrength and showRequirements hide either part.

Password strengthEnter a password
  • At least 8 charactersnot met
  • An uppercase letternot met
  • A lowercase letternot met
  • A numbernot met
  • A special characternot met

Your own rules. rules replaces the built-in set and extraRules adds to it. A rule is { label, test(password), required? }: required: false makes it a recommendation that counts towards the strength but never blocks. passwordRules has ready-made ones (minLength(n), uppercase, lowercase, digit, special, noSpaces, notContaining(words)), and defaultPasswordRules(minLength) is the built-in set. onResult reports { score, total, level, label, valid, met } whenever it changes, so a form can enable its submit button when valid (every required rule is met).

Password strengthEnter a password
  • At least 10 charactersnot met
  • A numbernot met
  • No spacesmet
  • Not "password" or "banana"met
  • A symbol such as ! or ?(recommended)not met

Only while typing. showOn="focus" hides the meter until the password field has focus (keyboard users get it on Tab), which keeps a sign-up form short. By default focus anywhere inside the parent element of the info counts, so wrap the input and the info together; or point focusTarget at the input (its id, a ref or the element). onResult keeps reporting while it is hidden, so a submit button still follows valid.

Props

PasswordStrengthInfo

  • passwordstring

    Current password to evaluate.

  • rulesPasswordRule[]

    Your own rules, replacing the built-in ones. See the PasswordRule table below.

  • extraRulesPasswordRule[]

    Rules added after the built-in ones (ignored when rules is set). See the PasswordRule table below.

  • minLengthnumber
    Default: 8

    Minimum length for the built-in length rule.

  • showStrengthboolean
    Default: true

    Show the strength label and bar.

  • showRequirementsboolean
    Default: true

    Show the requirement checklist.

  • labelsstring[]
    Default: ['Very weak', 'Weak', 'Fair', 'Good', 'Strong']

    Strength names, weakest first.

  • colorsstring[]
    Default: red to emerald

    Tailwind background classes for the bar, one per label.

  • emptyLabelstring
    Default: 'Enter a password'

    Shown while the password is empty.

  • onResult(result) => void

    Called when the outcome changes with { score, total, level, label, valid, met }. It keeps reporting while the info is hidden.

  • showOn'always' | 'focus'
    Default: 'always'

    Show it all the time, or only while the password field has focus.

  • focusTargetHTMLElement | RefObject | string
    Default: its parent element

    With showOn="focus": the element (or ref, or element id) that has to hold focus for the info to show.

  • classNamestring
    Default: ''

    Extra classes for the root element.

PasswordRule

  • keystring

    Identifies the rule (default: its position).

  • labelReactNode

    What the password must do, e.g. "At least 8 characters".

  • test(password) => boolean

    true when the password satisfies the rule.

  • requiredboolean
    Default: true

    false makes it a recommendation: it counts towards the strength, but a failure does not make valid false.