OneTaskBy Tim King · Updated
Password Visibility Toggle
Show and Hide Password Button With Eye Icon and Correct ARIA State
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Password Visibility Toggle works
This password visibility toggle generator writes the markup, CSS and script. Masked passwords cause typos, and typos cause failed logins. A visibility toggle lets people check what they typed. Choose an eye icon or a Show/Hide text button, style the field, and copy markup, CSS and a script that flips the input type and keeps the button's state readable to assistive technology. Click the toggle in the preview to try it.
How the password visibility toggle works
The field is a position: relative wrapper with the input filling it and a <button> placed
absolutely at the right edge. The input gets extra right padding equal to the button's footprint,
so long passwords never run underneath the icon.
The button is a real button. Using <button type="button"> rather than a clickable icon
means it is focusable, works with Space and Enter, and is announced by screen readers. type
matters: without it a button inside a form submits the form on click.
ARIA state. The toggle is a press button: aria-pressed="false" while the password is
hidden and true while it is visible. The script also updates aria-label between "Show
password" and "Hide password", and aria-controls points at the input's id so the relationship
is explicit. Both icons carry aria-hidden="true"; the label does the talking.
Switching the type. Changing input.type from password to text is all the browser needs
to unmask the value. The caret position and the value are preserved, and password managers keep
working because the field's autocomplete="current-password" hint is unchanged.
Two icons, one visible. Both the eye and the crossed-out eye are in the markup; a class on the button chooses which is displayed. That avoids swapping SVG paths in script and keeps the icons cacheable and easy to restyle.
Browser reveal buttons. Edge adds its own reveal control to password inputs. The
::-ms-reveal { display: none } rule hides it so users do not see two eyes.
Text button variant. Some sites prefer a literal "Show" label, which is clearer for users who do not recognise the eye metaphor. The text version swaps two spans instead of two SVGs and uses the same script.
Focus styling. The toggle removes the default outline and instead changes colour and adds a
soft background on :focus-visible, so keyboard users get a clear indicator without a square
ring clipped by the rounded field. If your brand needs a visible ring, replace that rule with an
outline of your own.
FAQ
Is showing a password a security risk?
Not on a device the user controls, which is where they are typing. The value is already in their keyboard buffer and browser memory. The risk is shoulder surfing, which is why the default is hidden and revealing is an explicit action.
Should the password reset to hidden on submit or blur?
Resetting on blur is annoying when someone clicks away to copy from a password manager and comes back. Resetting to hidden when the form is submitted is reasonable, since the value has left the page. Neither is required; the default keeps whatever the user chose.
Why not a checkbox labelled "Show password"?
A checkbox is a perfectly good alternative and needs no ARIA at all. The button version is used
here because it sits inside the field without disturbing the layout and matches what most login
forms do, but if you prefer a checkbox, bind its change event to the same type switch.
Does the eye icon need a text alternative?
Yes, and it has one: the button's aria-label. The SVGs themselves are decorative and hidden
from assistive technology. If you add a visible tooltip, keep the aria-label too so the name is
available without hovering.
Can I use this with the strength meter?
Yes. Put the toggle button inside the strength meter's field wrapper and reuse this CSS for the button. The Password Strength Meter generator targets the same input and does not care whether its type is password or text.
See also: all Forms & Inputs tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Colour.
Related tools
Password Strength Meter
Colour-coded password strength bar with a small scoring script.
Floating Label Form
Material-style floating labels in pure CSS with outlined, filled and underline variants.
Age Gate Builder
Age verification overlay with yes/no or date-of-birth check.
Input Mask Generator
Auto-formatting inputs for phone, date, card and custom patterns.
Custom Radio Button Builder
Accessible custom radio buttons as dots, cards or pill segments.