---
name: Password reveal toggle
slug: password-reveal-toggle
category: component
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: The control inside a password field, usually an eye or the word
  Show, that switches the characters between masked and readable.
aliases:
  - name: show password toggle
    source: community
  - name: reveal password
    source: community
  - name: password visibility toggle
    source: material
  - name: unmask button
    source: community
  - name: unmask password
    source: community
  - name: eye icon
    source: community
  - name: password input
    source: govuk
  - name: password toggle field
    source: radix
tags:
  - auth
  - forms
relations:
  contrastWith: []
  variantOf:
    - microinteraction
  partOf:
    - text-field
  seeAlso:
    - helper-text
implementations: []
sources:
  - title: "GOV.UK Design System: Password input"
    url: https://design-system.service.gov.uk/components/password-input/
demo: inline
exhibit: false
useWhen: naming the eye icon inside a password box
---

Masking a password protects it from the room, not from the machine, and the room
is usually empty. The reveal toggle gives that judgement back to the person
typing: they can see what they typed, catch the caps lock, and stop retyping a
long passphrase three times. Every measured version of this makes sign-in faster
and cuts failed attempts, which is why it has moved from a nicety to a default.

It is a toggle button, not a checkbox and not a link. `aria-pressed` carries the
state, the accessible name stays stable ("Show password") while pressed state
changes, or the name changes ("Show password" and "Hide password") while pressed
state is dropped: pick one convention, never both, or a screen reader announces
the contradiction. The field itself switches between `type="password"` and
`type="text"`, and the caret position should survive the switch.

Two details separate the careful implementations. The control sits inside the
field's box, so it belongs to that field and not to the form, and it must not
cover the text at the exact moment someone is reading it. And revealing is not
sticky: the field goes back to masked when the page reloads, when the form is
submitted, and often after a timeout, because a revealed password left on screen
is the failure mode the mask existed for.

An eye glyph alone is ambiguous (does the open eye mean "it is visible" or "make
it visible"?), which is why GOV.UK ships the words Show and Hide instead. If the
icon stays, give it a real label, and make sure the crossed-out eye and the plain
eye are distinguishable at the size they actually ship at.