Password Input

Ready

Secure password input with strength indicator and requirements

Interactive Preview

Click the eye icon to toggle visibility

Click the eye icon to toggle visibility

With Strength Indicator

Visual feedback on password strength

Good

With Requirements Checklist

Show password requirements with live validation

Sizes

Three size options: sm, md, and lg

Small

Medium (default)

Large

States

Different states for various use cases

Read Only

Disabled

With Error

Password must be at least 8 characters

Custom Requirements

Configure password validation rules

Usage

How to use the Password Input component

// Basic password input
<PasswordInput
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
value={password}
onChange={setPassword}
showStrength
showRequirements
minLength={12}
/>

API Reference

Props

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