Password Input Toggle
A password field with a show/hide toggle that lets users verify what they have typed, with the button's accessible name updating to reflect the current visibility state.
Demo
Tab to the password field and type a value. Tab to the show/hide button and press Enter or Space to toggle visibility. Observe how the input type and button label change with each activation.
Required
What to Observe
- The toggle button is reachable and operable by keyboard
- The button label or accessible name updates to reflect whether the password is currently shown or hidden
- The password field switches between masked and visible text when toggled
- Focus remains on the toggle button after activation and does not jump unexpectedly
- Screen readers announce the updated button state after toggling
Anatomy
[Anatomy image placeholder — will be added when assets are available]
- Password Input — the text field that accepts the user's password, masked by default
- Toggle Button — an interactive control that switches the field between masked and visible states
- Button Label / Icon — the visual and accessible indicator of the current show or hide state
Accessibility Behavior
- Use a native button element for the toggle to ensure keyboard and assistive technology support
- Update the button's accessible name dynamically to reflect whether the password is currently shown or hidden
- Associate the input field with a visible label using a native label element or aria-labelledby
- Do not move focus away from the toggle button after activation
- Ensure the toggle is positioned and announced in a way that makes its relationship to the password field clear
- If using an icon-only button, provide an accessible text alternative that conveys the current action
Common Mistakes
- Using a static label such as "Show" that never updates when the password is revealed
- Implementing the toggle as a non-interactive element such as a span or div
- Moving focus to the input field after toggling, which disorients keyboard users
- Using only a visual icon with no accessible text, leaving screen reader users without context
- Failing to associate the password label with the input, making the field purpose unclear
Why This Matters
Password fields are high-stakes inputs where errors lead to failed logins. When the toggle button has a static or missing label, screen reader users cannot tell whether the password is currently visible or hidden. When focus moves unexpectedly after toggling, keyboard users lose their place. Getting this pattern right reduces friction at a critical point in the user journey and ensures that all users — including those relying on assistive technology — can verify their input confidently.
Accessibility Validation
This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.
To learn more, please contact us.
Code