Password field
A password input with reveal control, live strength, and visible requirements.
Use a passphrase you do not reuse elsewhere.
Strong
- At least 8 characters
- Upper and lowercase letters
- A number
- A symbol
Implementation
1"use client";2 3import { useId, useState, type InputHTMLAttributes } from "react";4import { Check, Eye, EyeOff, X } from "lucide-react";5 6export type PasswordRule = {7 id: string;8 label: string;9 test: (value: string) => boolean;10};11 12export type PasswordFieldProps = Omit<13 InputHTMLAttributes<HTMLInputElement>,14 "type" | "value" | "defaultValue" | "onChange" | "size"15> & {16 label: string;17 value?: string;18 defaultValue?: string;19 onValueChange?: (value: string) => void;20 hint?: string;21 showStrength?: boolean;22 showRequirements?: boolean;23 rules?: PasswordRule[];24};25 26const defaultRules: PasswordRule[] = [27 {28 id: "length",