Skip to main content

​
Overview

The Password Strength Meter component provides real-time visual feedback on password security, displays requirement checklists, and offers password visibility toggling and auto-generation features. It helps users create strong, secure passwords with clear visual indicators.

​
Installation

npx shadcn@latest add https://rigidui.com/r/strength-meter.json

​
Usage

import { PasswordStrengthMeter } from "@/components/strength-meter"

export default function MyComponent() {
  return (
    <PasswordStrengthMeter
      placeholder="Type your password"
      className="max-w-md"
    />
  )
}

​
Features

Visual Strength Indicator

Provides visual feedback on password strength with colored segments that update in real-time.

Customizable Segments

Adjust the number and appearance of the strength meter segments to match your design.

Password Requirements

Shows a checklist of requirements that help users create stronger passwords with validation feedback.

Password Visibility Toggle

Allows users to show or hide their password with a toggle button for better usability.

Animated Feedback

Provides animated visual feedback as the user types their password with smooth transitions.

Auto Password Generation

Generate strong, secure passwords automatically with customizable length and complexity.

​
API Reference

​
PasswordStrengthMeter

​
value
string
default:"''"
The current password value.
​
onValueChange
(value: string) => void
Function called when the password value changes.
​
showText
boolean
default:"true"
Whether to show the strength text label.
​
showRequirements
boolean
default:"true"
Whether to show the password requirements list.
​
segments
number
default:"4"
Number of segments in the strength meter.
​
strengthThresholds
Record<StrengthLevel, number>
Score thresholds for each strength level.
​
requirements
PasswordStrengthRequirement[]
Array of password requirements with validators. Defaults to standard requirements (length, uppercase, lowercase, numbers, special characters).
​
customCalculateStrength
(password: string) => number
Custom function to calculate password strength score (0-100).
​
showPasswordToggle
boolean
default:"true"
Whether to show the password visibility toggle.
​
strengthLabels
Record<StrengthLevel, string>
Custom labels for each strength level.
​
meterClassName
string
Additional class names for the meter element.
​
inputClassName
string
Additional class names for the input element.
​
placeholder
string
default:"'Enter password'"
Placeholder text for the password input.
​
animated
boolean
default:"true"
Whether to animate the strength meter segments.
​
enableAutoGenerate
boolean
default:"false"
Whether to enable auto password generation feature.
​
autoGenerateLength
number
default:"10"
Length of the auto-generated password.
​
theme
StrengthMeterTheme
Custom theme configuration for styling all components.

​
TypeScript Interfaces

​
PasswordStrengthRequirement

interface PasswordStrengthRequirement {
  label: string
  validator: (password: string) => boolean
}

​
StrengthMeterTheme

interface StrengthMeterTheme {
  container?: string
  input?: string
  inputContainer?: string
  meterContainer?: string
  meterSegment?: string
  strengthText?: string
  requirementsContainer?: string
  requirementItem?: string
  requirementIcon?: string
  requirementText?: string
  strengthColors?: {
    empty?: string
    weak?: string
    fair?: string
    good?: string
    strong?: string
  }
}

​
StrengthLevel

type StrengthLevel = "empty" | "weak" | "fair" | "good" | "strong"

​
Custom Requirements Example

import { PasswordStrengthMeter, PasswordStrengthRequirement } from "@/components/strength-meter"

const customRequirements: PasswordStrengthRequirement[] = [
  {
    label: "At least 12 characters",
    validator: (password) => password.length >= 12,
  },
  {
    label: "Contains uppercase and lowercase",
    validator: (password) => /[a-z]/.test(password) && /[A-Z]/.test(password),
  },
  {
    label: "Contains numbers",
    validator: (password) => /\d/.test(password),
  },
  {
    label: "No common patterns",
    validator: (password) => !/(123|abc|password)/i.test(password),
  },
]

export default function CustomPasswordInput() {
  return (
    <PasswordStrengthMeter
      requirements={customRequirements}
      enableAutoGenerate
      autoGenerateLength={16}
    />
  )
}

​
Custom Strength Calculation

import { PasswordStrengthMeter } from "@/components/strength-meter"

const calculateCustomStrength = (password: string): number => {
  let score = 0
  
  // Length scoring
  if (password.length >= 8) score += 20
  if (password.length >= 12) score += 20
  if (password.length >= 16) score += 20
  
  // Character variety
  if (/[a-z]/.test(password)) score += 10
  if (/[A-Z]/.test(password)) score += 10
  if (/\d/.test(password)) score += 10
  if (/[^a-zA-Z0-9]/.test(password)) score += 10
  
  return Math.min(score, 100)
}

export default function CustomStrengthPassword() {
  return (
    <PasswordStrengthMeter
      customCalculateStrength={calculateCustomStrength}
    />
  )
}
Combine the Password Strength Meter with form validation libraries like Zod to enforce password requirements at the form level.
The default strength calculation considers password length, character variety (uppercase, lowercase, numbers, special characters), and common patterns. You can override this with customCalculateStrength.
Always validate password strength on the server-side as well. Client-side validation can be bypassed and should be considered a UX enhancement rather than a security measure.

Build docs developers (and LLMs) love

Get started for freeTalk to us