Password Strength

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add password-strength

Usage#

Hold the password in state and hand the same value to both the PasswordInput and PasswordStrength. The root scores the value against its rule set and exposes the result to the parts through context - compose PasswordStrengthMeter, PasswordStrengthLabel, and PasswordStrengthList in any arrangement.

"use client"
import * as React from "react"
import { PasswordInput } from "@/components/ui/input"
import {
  PasswordStrength,
  PasswordStrengthMeter,
  PasswordStrengthLabel,
} from "@/components/ui/password-strength"

export function Example() {
  const [value, setValue] = React.useState("")
  return (
    <>
      <PasswordInput value={value} onChange={(e) => setValue(e.target.value)} />
      <PasswordStrength value={value}>
        <PasswordStrengthMeter />
        <PasswordStrengthLabel placeholder="-" />
      </PasswordStrength>
    </>
  )
}

With requirements#

Add PasswordStrengthList to spell out the policy. The moment the password satisfies a requirement, its dot lifts up and out while the check rises from below into place, so a rule being met reads as progress rather than a blink, and the user always knows what is left.

Inside a Field#

It composes straight into a Field, sitting where the hint would - the label and input keep their auto-wiring while the meter reports on the value below them.

Custom policy#

Pass rules to replace the default policy. Each rule is an { id, label, test } - the meter normalises however many you supply onto its four segments, and the list renders one row per rule.

FAQ#