Password Input

Wraps Input (keeping all of its theming) and adds a trailing show/hide eye toggle that flips the field between password and text. The eye is a real keyboard-accessible button (aria-label + aria-pressed) and reads like our muted field icons. Used on the login and set-password screens. The file also exports PasswordRequirements(the live rule checklist) + passwordMeetsAll(), shared by set-password and the in-app change-password form so the rules never drift.

Default

Click the eye to reveal the value.

Disabled

Requirements checklist

Live pass/fail as the user types. Met vs unmet differ by SHAPE (filled check vs hollow ring), not colour alone (WCAG 1.4.1). Shown here for a partially-valid value.

  • At least 8 characters(not met)
  • Upper & lowercase letters(met)
  • A number(met)
Theme