Use the confirmation prop to only include the label and show/hide icon.

Meter Settings

By default, the minimum length is 12 and the strength meter will show a strength of 1 if not met. Notice the bar won't change from red until the minimum is met
Use the minLength prop to adjust.

The meter also response to averageThreshold and strongTreshold props. averageThresold defaults to 2, and strongThreshold defaults to 3.
This means that the bar will turn yellow when the strength of the passphrase is calculated to be 2 on a 0-4 scale, and green when 3.

Adjust these props to tune the sensitivity of the bar.
Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.

Input Props

inputProps is passed directly to an underlying Text Input kit. See the specific docs here for more details.


showTipsBelow(react) / show_tips_below(rails) takes 'xs', 'sm', 'md', 'lg', 'xl' and only show the tips below the given screen size. Similar to the responsive table breakpoints. Omit this prop to always show.

Strength Change

As the strength of the entered passphrase changes, the optional onStrengthChange callback is called with the new strength value. This exposes the calculated strength.

Strength is calculated on a 0-4 scale by the Zxcvbn package

Common Passphrases

Breached Passphrases

Use checkPwned | checked_pwned prop to enable checking against HaveIBeenPwned's API. As the passphrase is typed, it is checked against more than half a billion breached passwords, to help ensure its not compromised.
Should it fail, the feedback will express the passphrase is too common, prompting the user to change.
This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.