PasswordStrengthMeter

Starter

Password validation indicator with requirements.

formvalidationsecurity

Import

import { PasswordStrengthMeter } from "@/components/ui";

Basic Usage

PasswordStrengthMeter Preview

Password

Password strengthGood

Minimum 8 characters
Contains uppercase letter
Contains lowercase letter
Contains number
Contains special character

Code

tsx

const [password, setPassword] = useState("");

return (
  <div className="space-y-2">
    <FieldWrapper label="Password" required>
      <Input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
    </FieldWrapper>
    <PasswordStrengthMeter password={password} />
  </div>
);

With Requirements

Show password requirements

1<PasswordStrengthMeter
2  password={password}
3  minLength={12}
4  showRequirements
5/>

Hide Requirements

Just show strength bar

1<PasswordStrengthMeter
2  password={password}
3  showRequirements={false}
4/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring