Authentication · Concept

Reveal the password without replacing the field.

A show-password control changes presentation, preserves the value, stays focused, and exposes its pressed state.

Prerequisite: Build sign-in and sign-up fields

The principle

Use a real toggle button. Keep its label stable and communicate state with aria-pressed.

Interactive demo

Type, paste, show, hide.

The password value and button focus survive every visibility change. The state is both visible and programmatic.

Password is hidden.

Implementation

Change only what needs to change.

The button’s visible label remains “Show password.” Pressed state means the requested presentation is active. Avoid replacing the input, losing its value, or moving focus back to it unexpectedly.

HTML

One input and one named toggle button.

<input id="password" type="password">
<button type="button" aria-pressed="false">Show password</button>

State change

Update type, pressed state, and visible explanation.

input.type = shown ? 'text' : 'password';
button.setAttribute('aria-pressed', shown);
state.textContent = shown ? 'Password is visible.' : 'Password is hidden.';

Quick test

Protect value and orientation.

  1. Type and paste a password, then toggle repeatedly; the value must remain unchanged.
  2. Confirm focus stays on the button after activation.
  3. Listen for the button name and pressed state.
  4. Confirm visible state text changes between hidden and visible.
  5. Submit while either state is active and confirm the same password value is sent.
  6. Do not expose the password automatically or persist the visible state unexpectedly.