Summary
As a user typing a password, I want to reveal my password as I type it so that I can verify I entered it correctly and avoid submitting a mistyped password.
Background & research
This request is based on observed behavior from usability testing on account creation. Across several sessions, mistyping passwords on mobile came up repeatedly, giving us evidence that a reveal password button would be a convenient addition, especially on touch devices.
Currently in production, this behavior is implemented using the endIcon prop, but this comes with a few caveats: endIcon is intended for decorative icons, not actionable ones, so the eye icon currently renders in a placeholder color rather than as a proper interactive element.
This task proposes adding a first-class, actionable reveal button to the TextInput component so we no longer need this workaround.
Design
TBD
The reveal button should probably reuse the same visual style used for the existing clear icon button in TextInput.
Open questions
- Should the touch target for the reveal button be larger than the visible icon itself? The icon is relatively small, especially for touch devices, so this is worth a decision before implementation.
