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