Password Input
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The PasswordInput component provides a secure password input field with visibility toggle and optional strength meter. Built with security and usability in mind, it includes password strength validation, customizable labels, and accessibility features.
Basic Usage
Password strength:Very weak
Without Strength Meter
Custom Labels
Força da senha:Muito fraca
Form Integration
Password Strength Examples
Very Weak Password
Password strength:Very weak
Weak Password
Password strength:Very weak
Medium Password
Password strength:Very weak
Strong Password
Password strength:Very weak
Login Form
Disabled State
Password strength:Very weak
Properties
PasswordInput
| Property | Type | Default | Description |
|---|---|---|---|
showStrengthMeter | boolean | true | Whether to show the password strength meter. |
strengthLabels | object | See below | Custom labels for strength levels. |
showPasswordLabel | string | "Show password" | Label for show password button. |
hidePasswordLabel | string | "Hide password" | Label for hide password button. |
strengthTitle | string | "Password strength" | Title for the strength meter section. |
className | string | - | Additional CSS classes for the input. |
placeholder | string | - | Placeholder text for the input. |
value | string | - | Controlled value of the input. |
defaultValue | string | - | Default value for uncontrolled input. |
onChange | (event: ChangeEvent<HTMLInputElement>) => void | - | Change event handler. |
disabled | boolean | false | Whether the input is disabled. |
required | boolean | false | Whether the input is required. |
id | string | - | HTML id attribute. |
name | string | - | HTML name attribute. |
Default Strength Labels
{
veryWeak: 'Very weak',
weak: 'Weak',
medium: 'Medium',
strong: 'Strong',
veryStrong: 'Very strong'
}
Password Strength Calculation
The component calculates password strength based on:
| Criteria | Points | Description |
|---|---|---|
| Length | 25 points | Password has 8 or more characters |
| Lowercase | 25 points | Contains lowercase letters (a-z) |
| Uppercase | 25 points | Contains uppercase letters (A-Z) |
| Numbers | 25 points | Contains numeric digits (0-9) |
Strength Levels
| Score | Level | Color |
|---|---|---|
| 0 points | Very Weak | Red |
| 1-25 points | Weak | Orange |
| 26-50 points | Medium | Yellow |
| 51-75 points | Strong | Light Green |
| 76-100 points | Very Strong | Green |
Accessibility
The PasswordInput component includes comprehensive accessibility features:
- Keyboard Navigation - Full keyboard support for all interactions
- Screen Reader Support - Proper labeling and ARIA attributes for toggle button
- Focus Management - Clear focus indicators and logical tab order
- Password Visibility - Toggle button with descriptive labels
- Form Integration - Works seamlessly with form validation
- Strength Feedback - Visual and textual feedback for password strength
Security Considerations
- Client-side Only - Strength calculation is for UX, not security validation
- Server Validation - Always validate password strength on the server
- No Storage - Component doesn't store or transmit passwords
- Visibility Toggle - Helps users verify their input while maintaining security
- Progressive Enhancement - Works without JavaScript for basic functionality
Common Use Cases
The PasswordInput component is perfect for:
- User Registration - Account creation with password strength guidance
- Login Forms - Secure authentication with visibility toggle
- Password Reset - New password creation with strength validation
- Settings Pages - Password change functionality
- Admin Panels - User management and password policies
- Multi-step Forms - Registration flows with password requirements
Best Practices
- Clear Requirements - Communicate password requirements upfront
- Real-time Feedback - Show strength as users type
- Appropriate Labels - Use clear, descriptive labels for all elements
- Server Validation - Never rely solely on client-side validation
- Accessibility - Ensure all users can interact with the component
- Mobile Optimization - Test on various devices and screen sizes
- Security Guidelines - Follow current password security best practices
- Localization - Provide appropriate labels for different languages