Password Input
ProA text input with type="password" that masks characters by default. Includes a toggle button to reveal or hide the password. Supports strength indicators and validation messaging for sign-up forms.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Masked password input with a show/hide toggle button. | Use for login forms and any field requiring a password entry. |
| With Strength | ||
| With Toggle |
Usage Guidelines
Do
Include a show/hide toggle so users can verify their input.
Don't
Prevent pasting into password fields — it discourages password managers.
Do
Show password strength feedback on registration forms.
Don't
Limit password length to fewer than 64 characters.
Do
Use aria-describedby to link password requirements to the input.
Don't
Mask the confirmation field when the primary field is revealed.
Do
Set autocomplete="current-password" for login and "new-password" for registration.
Don't
Code
Design Tokens
Accessibility
- Toggle button uses aria-label="Show password" / "Hide password" based on state.
- Password requirements linked via aria-describedby.
- Strength indicator uses aria-live="polite" to announce changes.
- Input uses autocomplete attribute for password manager support.