Password Input

Password field for login, sign-up, and reset flows. Show / hide, optional strength meter, requirements checklist, copy, and Caps Lock warning — built on InputGroup.

Gallery

Complete create-password card with strength, checklist, and copy.

Loading…

Installation

CLI

npx @sonojs/ui@latest add password-input

Also needs

npx @sonojs/ui@latest add input-group

npm i lucide-react

Usage

password-input.tsx

import { PasswordInput } from "@/components/password-input"

export function Example() {
  return (
    <PasswordInput
      placeholder="Password"
      showStrength
      showRequirements
      autoComplete="new-password"
    />
  )
}

Props

Prop	Type	Default	Description
value / defaultValue / onChange	string / ChangeEvent	-	Native input value API — works with React Hook Form.
showStrength	boolean	false	Show the four-level strength meter.
showRequirements	boolean	false	Show the live requirements checklist.
showCopy	boolean	false	Show a copy-to-clipboard button.
showCapsLockWarning	boolean	true	Warn when Caps Lock is on while focused.
minLength	number	8	Minimum length for default requirements and strength.
requirements	PasswordRequirement[]	defaults	Custom `{ id, label, test }` rules for the checklist.
visible / defaultVisible / onVisibleChange	boolean	false	Control show / hide password visibility.
disabled	boolean	false	Disables the input and addon buttons.
className	string	-	Merge Tailwind classes on the root wrapper.

Input — plain text fields
Input Group — addons and icon buttons
Field — label and describe the control
Input OTP — one-time codes