10.8.0

Passphrase

Default


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.

Tips


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.