Components
Both
src/components/password-input.tsxPassword 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 color 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)
Used on
- Console
- /console (every page)
- Portal
- /(student) (every page)/invite/login/set-password