ttolbel UI

Component

Password strength

Four color-coded bars and a label that score a password as it's typed, based on length and character variety. Renders nothing when the field is empty.

Standalone

Strong
password strength.tsx
<NativePasswordStrength password={password} />

Example

Updates live beneath a password field during account setup, updating with every keystroke.

Strong
password-strength-example.tsx
<NativeInput type="password" value={password} onValueChange={onPasswordChange} />
<NativePasswordStrength password={password} />

Capabilities

PropTypeDescription
passwordrequiredstring-
classNamestring-