React Password Input Components

Copy Page

Secure and user-friendly password input components with visibility toggle and optional strength validation. Perfect for authentication forms, registration pages, and any application requiring password input.

Basic Password Input

A simple password input with visibility toggle functionality.

Key Features

• Toggle Visibility: Click the eye icon to show/hide password
• Clean Design: Minimal and professional appearance
• Accessibility: Proper labeling and keyboard support
• Responsive: Adapts to container width

---

Strong Password Input

An enhanced password input with real-time validation and strength requirements.

Validation Rules

• Minimum Length: At least 8 characters
• Numbers: At least 1 numeric digit
• Lowercase: At least 1 lowercase letter
• Uppercase: At least 1 uppercase letter
• Special Characters: At least 1 special character

Visual Indicators

• ✅ Green checkmark: Requirement met
• ❌ Red X: Requirement not met
• Real-time feedback: Updates as you type
• Color-coded text: Green for valid, muted for invalid

---

Change Password Form

A complete change-password flow that composes the two patterns above: a current-password field, a new password validated against the same strength requirements, and a confirmation field that checks the two match. The submit button stays disabled until every requirement is met, the new password differs from the current one, and the confirmation matches — then it resolves to a success state.

What it enforces

• Current password required: submission is blocked until the current password is entered.
• Strength on the new password: the same five requirements as the Strong Password input, shown as you type.
• Must be different: a new password identical to the current one is rejected with an inline warning.
• Confirmation must match: a live indicator — icon plus text, never colour alone — confirms the two entries agree.
• Per-field visibility: each field has its own show/hide toggle, so revealing the new password never exposes the current one.

---

Installation

You can add these components to your project using the CLI or by manually copying the code.

Basic Password Input

Strong Password Input

Change Password Form

---

Usage Examples

Basic Implementation

After installation, import and use the components in your React application:

Custom Styling

Both components accept standard input props and can be customized:

Form Integration

Perfect for use with form libraries like React Hook Form:

---

Component Props

PasswordInput Props

Prop	Type	Default	Description
placeholder	string	"Enter your password"	Placeholder text for the input field.
className	string	""	Additional CSS classes for the input container.
disabled	boolean	false	Whether the input is disabled.
...inputProps	React.InputHTMLAttributes		Any other standard input attributes (e.g., onChange, onFocus, autoComplete).

StrongPasswordInput Props

Prop	Type	Default	Description
placeholder	string	"Create a strong password"	Placeholder text for the input field.
className	string	""	Additional CSS classes for the input container.
disabled	boolean	false	Whether the input is disabled.
...inputProps	React.InputHTMLAttributes		Any other standard input attributes (e.g., onChange, onFocus, autoComplete).

---

Accessibility Features

Both password components are built with accessibility in mind:

Keyboard Navigation

• Tab Navigation: Navigate between input and toggle button using Tab key
• Enter/Space: Activate the visibility toggle button
• Screen Reader Support: Proper ARIA labels and descriptions

ARIA Attributes

• aria-label="Toggle password visibility" on the toggle button
• Proper labeling for password requirements in Strong Password variant
• Semantic HTML structure for better screen reader compatibility

Visual Indicators

• High Contrast: Clear visual distinction between states
• Color Independence: Information conveyed through icons, not just color
• Focus States: Visible focus indicators for keyboard users

---

Customization

Styling Customization

The components use Tailwind CSS classes that can be easily customized:

Validation Rules Customization

For the Strong Password component, you can modify the validation rules in the source code:

Icon Customization

Replace the default eye icons with your preferred icons:

---

Best Practices

Security Considerations

• Never log passwords: Avoid logging password values in development or production
• Use HTTPS: Always transmit passwords over secure connections
• Implement rate limiting: Protect against brute force attacks
• Hash passwords: Use proper password hashing on the server side

UX Recommendations

• Clear requirements: Use the Strong Password variant for registration forms
• Progressive disclosure: Show validation only after user starts typing
• Helpful feedback: Provide clear, actionable validation messages
• Consistent placement: Keep password fields in expected locations

Form Integration

• Proper autocomplete: Use autoComplete="current-password" for login, autoComplete="new-password" for registration
• Validation timing: Validate on blur or after user stops typing, not on every keystroke
• Error handling: Provide clear error messages for failed validation

---

Use Cases

Login Forms

Use the basic PasswordInput for simple, clean login interfaces:

• Minimal visual clutter
• Quick password entry
• Standard visibility toggle

Registration Forms

Use StrongPasswordInput for account creation:

• Guides users to create secure passwords
• Real-time validation feedback
• Reduces password-related support issues

Password Change Forms

Use the ChangePasswordForm when users update their passwords:

• Verifies the current password before allowing a change
• Reuses the strength requirements so new passwords stay secure
• Confirms the new password matches and differs from the old one

Admin Interfaces

Both components work well in admin dashboards:

• Professional appearance
• Consistent with modern UI patterns
• Accessible for all users