PasswordInput

StableAccessible

A password field is a foundational input field component that the user can interact with and specifically input password data.

Usage

Example

Assistive text

Principles

  • A label should always be provided with password fields.
  • If possible, validate input in client-side real-time and provide the user with immediate feedback. See HDS Form validation pattern page for more information and best practices with password fields.
  • Password fields should always be mandatory. It is recommended to mark it as a required field.
  • Verify that "paste" functionality, browser password helpers, and external password managers are allowed for the input.
  • HDS password input provides a way to mask/unmask the password. Do not disabled this functionality without a good reason.

Variations

Default

A default HDS password input includes an icon to mask and unmask the password.

Assistive text

With an external button

If necessary, the mask/unmask icon can be removed and the feature controlled with an external button element.

Assistive text