Password Strength

Usage

import { PasswordStrength } from '@wdzyi/ui';

<PasswordStrength
  label='New password'
  name='password'
  value={password}
  onValueChange={setPassword}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

value, defaultValue, onValueChangestring, string, (value: string) => void

Hold the password yourself, or let the field hold it.

rulesPasswordStrengthRule[]

What a strong password needs, each a label and a test. Twelve characters or more, a number, a symbol, and upper and lower case by default. Strong means every rule is met, and the rest are spread over Weak, Fair and Good.

minLengthnumber = 8

Shorter than this, it’s Too short, whatever else it has.

labelstring = 'Password'

Above the field, and its name for screen readers.

name, placeholder, autoCompletestring = autoComplete 'new-password'

Passed to the input.

classNamestring

Added to its root. It’s 380px wide at most, and the rules go into two columns from 360px.

Notes

• Each segment fills from the left over 340ms, and segments filling or emptying together go 50ms apart. They stay ink until every rule is met, then turn green from the left, 60ms apart, as the word morphs to Strong.
• A rule’s tick draws itself in green over 420ms as it’s met, and its words come forward.
• The eye is a toggle with aria-pressed. Its lid opens and shuts over 280ms, and the pupil is cut to the space between the lids, so the lid covers it as it comes down. Pressing it leaves the caret where it was in the field.
• The rules describe the field, so a screen reader hears which are met, and once typing pauses for 0.7s it hears the strength.
• With reduced motion, the segments and the eye change at once, and the ticks fade in.