Password Input

Forms

Security

Secure password input with visibility toggle, strength indicator, and requirements checklist. Perfect for login and registration forms.

Preview

Click the eye icon to toggle visibility

Password

Click the eye icon to toggle visibility

With Strength Indicator

Visual feedback on password strength

New Password

Good

With Requirements Checklist

Live validation against password requirements

Create Password

Sizes

Three size options: sm, md, and lg

Small

Medium (default)

Medium

Large

States

Various input states

Read Only

Disabled

With Error

Password must be at least 8 characters

Custom Requirements

Configure password validation rules

PIN Code

Props

PasswordInput component API reference

Prop	Type	Default	Description
`value`	`string`	—	Current password value
`onChange`	`(value: string) => void`	—	Callback when value changes
`label`	`string`	—	Label text
`placeholder`	`string`	—	Input placeholder
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size
`showStrength`	`boolean`	`false`	Display password strength meter
`showRequirements`	`boolean`	`false`	Display requirements checklist
`minLength`	`number`	`8`	Minimum required length
`requireUppercase`	`boolean`	`true`	Require uppercase letters
`requireLowercase`	`boolean`	`true`	Require lowercase letters
`requireNumbers`	`boolean`	`true`	Require numbers
`requireSpecial`	`boolean`	`true`	Require special characters
`error`	`string`	—	Error message
`helperText`	`string`	—	Helper text
`disabled`	`boolean`	`false`	Disable interaction
`readOnly`	`boolean`	`false`	Make read-only
`autoComplete`	`string`	`'current-password'`	Autocomplete attribute

Usage

Import and implementation example

import { PasswordInput } from '@/components/ui/password-input'

export default function Example() {
  const [password, setPassword] = useState('')

  return (
    <>
      {/* Basic password input */}
      <PasswordInput
        label="Password"
        value={password}
        onChange={setPassword}
        placeholder="Enter password"
      />

      {/* With strength indicator */}
      <PasswordInput
        label="New Password"
        value={password}
        onChange={setPassword}
        showStrength
        autoComplete="new-password"
      />

      {/* With requirements checklist */}
      <PasswordInput
        label="Create Password"
        value={password}
        onChange={setPassword}
        showStrength
        showRequirements
        minLength={12}
      />

      {/* Custom requirements for PIN */}
      <PasswordInput
        label="PIN Code"
        placeholder="6-digit PIN"
        showStrength
        showRequirements
        minLength={6}
        requireUppercase={false}
        requireLowercase={false}
        requireSpecial={false}
        requireNumbers={true}
      />
    </>
  )
}

Features

Built-in functionality

Visibility toggle: Show/hide password with eye icon
Strength meter: Visual indicator of password strength
Requirements checklist: Live validation against rules
Configurable requirements: Customize validation rules
Three sizes: Small, medium, and large variants
Error state: Display validation error messages
Autocomplete support: Works with password managers
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Input type toggles between password and textToggle button has aria-labelError messages linked via aria-describedby

Keyboard Navigation

Key	Action
`Tab`	Navigate between input and toggle
`Enter/Space`	Toggle password visibility

Notes

Password hidden by default for security
Strength indicator uses color and text
Requirements checklist uses checkmarks
Error state indicated by color and border

Related Components

Input Input OTP Form Field