PasswordStrength

stable

Password complexity meter with four-segment bar and requirement checklist

import { PasswordStrength } from "@danagraph/design-system"

Strong

✓At least 8 characters

✓Uppercase and lowercase

✓Contains a number

✓Contains a special character

Loading demo…

Props

Prop	Type	Default	Description
`password`req	`string`	—	Password to evaluate
`requirements`	`PasswordRequirement[]`	—	Custom requirements
`hideRequirements`	`boolean`	false	Hide checklist

passwordrequired

Type stringDefault —

Password to evaluate

requirements

Type PasswordRequirement[]Default —

Custom requirements

hideRequirements

Type booleanDefault false

Hide checklist

MobileWorks As-Is

Strength bar fills container width. Works at any viewport.

Design Rationale

This component was designed to express:

Authentication form with email/password, SSO providers, password strength, and branding slot

Horizontal bar gauge with low/high threshold markers

Was this helpful?