@n8d/htwoo-patterns
Version:
hTWOo Patterns to setup custom style guide
52 lines (34 loc) • 1.53 kB
Markdown
---
title: Password Input
order: 10.2
---
# Password Input
A specialized text input field designed for secure password entry.
## Overview
The password input provides a secure way to collect sensitive information by masking the entered characters. It may include additional features like password visibility toggling and strength indicators.
## Usage
Password inputs should be used when:
* The input contains sensitive information that should be masked
* Secure credential entry is required
* User privacy during input is important
## States
* **Default** - Normal state
* **Focus** - When the input has keyboard focus
* **Disabled** - When the input cannot be interacted with
* **Invalid** - When the password doesn't meet required criteria
## SCSS
**Component Import**
**SCSS Partial Location**
## CSS Classes
* `.hoo-input-text` - Base text input class (shared with other text input types)
## Security Considerations
* Consider implementing password strength indicators
* Avoid storing passwords in plain text
* Consider providing a "show password" toggle option for better usability
* Do not disable paste functionality (it hinders password managers)
## Accessibility
* Always associate with a `<label>` element
* Provide clear password requirements
* If validation errors occur, ensure error messages are associated properly
* When disabled, include `aria-disabled="true"`
* Consider adding `autocomplete="new-password"` for new password fields and `autocomplete="current-password"` for existing password entry