Password Input

A password field with a show/hide visibility toggle and an optional live strength meter. Wraps `InputGroup`, works controlled or uncontrolled, and forwards every native `<input>` prop.

  • At least 8 characters— not met
  • An uppercase letter— not met
  • A lowercase letter— not met
  • A number— not met
  • A symbol— not met

Click the eye to reveal. The meter and checklist appear as you type.

Installation

pnpm dlx shadcn@latest add @syncblocks/password-input

Usage

import { PasswordInput } from "@/components/ui/password-input"
<PasswordInput id="password" autoComplete="current-password" />

Put it inside a Field for a label, description, and validation, exactly like Input:

<Field data-invalid={!!error}>
  <FieldLabel htmlFor="password">Password</FieldLabel>
  <PasswordInput
    id="password"
    autoComplete="current-password"
    aria-invalid={!!error}
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
  {error && <FieldError>{error}</FieldError>}
</Field>

The strength meter is intentionally opt-in — enable it only on fields where a new password is set (register, reset, change), never on a sign-in or current-password field.

Examples

Default

Masked input with a show/hide toggle. No strength meter.

With Strength Meter

Set showStrength to render a live 0–3 strength meter below the field as the user types. Use the exported scorePassword to gate submission.

x

With Requirements Checklist

Set showChecklist to render a live per-rule checklist below the field — each rule shows a check when met (success) and a cross when not (destructive). Pairs with showStrength. Gate submission with the exported passwordRequirements.

x
  • At least 8 characters— not met
  • An uppercase letter— met
  • A lowercase letter— met
  • A number— met
  • A symbol— not met

API Reference

Extends React.ComponentProps<"input"> (minus type) — every native input prop (value, defaultValue, onChange, disabled, placeholder, autoComplete, aria-invalid, …) is forwarded to the underlying control.

PropTypeDefaultDescription
showStrengthbooleanfalseRender a live 0–3 strength meter below the input. Use only on new-password fields.
showChecklistbooleanfalseRender a live per-rule requirements checklist below the input (check = met, cross = unmet). Use only on new-password fields.
valuestring-Controlled value. Omit for uncontrolled use — the component tracks its own value so the meter still works.
onChangeReact.ChangeEventHandler<HTMLInputElement>-Change handler forwarded to the input.
classNamestring-Additional CSS classes applied to the input control.

scorePassword

The heuristic behind the meter is exported for reuse in validation:

import { scorePassword } from "@/components/ui/password-input"

// 0 too weak · 1 weak · 2 good · 3 strong
if (scorePassword(password) < 1) {
  setError("Use at least 8 characters.")
}

It scores on length (≥ 8), mixed case, and a digit-plus-symbol combination. Swap it for a real entropy estimator (e.g. zxcvbn) if you need one — keep the 0–3 scale so the meter still reads it.

PageWorkspace