passwordToggle
A show/hide control for the one field on a form whose value nobody can proof-read.
Every field below starts masked. Press the eye to read the value back, press it again to hide it. Nothing else about the field changes while you do — put the caret in the middle of the value, toggle, and it is still where you left it.
The default: over the field's edge
The placement readers expect. It costs one declaration — the field
gets a padding-inline-end wide enough for the button,
written specifically enough to win against the
padding shorthand this demo sets on the same field,
whatever the order of the stylesheets. Type a long
value and watch it stop at the gutter instead of running
under the eye.
Next to the field
class="c-passwordToggle--beside" puts the button after
the field in the same row and touches nothing of the
field's box at all — no gutter, no padding of yours given
up. It is the way out where the field's padding is not negotiable,
and the honest placement for a field too short to spare a gutter.
Inside a form: submitting masks it again
The reveal is a moment, not a setting. Reveal the value, then press Sign in: the field is masked before the form goes anywhere, so a page coming back from the back/forward cache — or re-rendered after a failed validation — never comes back with the password on screen. (This form submits to nothing; only the event matters.)
Retuned, and in its own words
A smaller, round control in the secondary accent — four custom
properties set on the wrapper, no rule reaching into the component
— and data-passwordtoggle-label for the button's
accessible name. The name stays constant while the state
is announced through aria-pressed, so it is phrased as
one label rather than as two.
At least 12 characters.