Build a Show/Hide Password Input | Interview Question

Q: Build a Show/Hide Password Input

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML forms and a little JavaScript; React is explained as we go. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the precise vocabulary. The Verified output comes from mounting the solution with React 19.3.1 in jsdom and driving it with a script; facts about real browsers are either measured in Chromium 141 or cited. ## 1. Why This Even Matters — A Story First Imagine entering a door code on a keypad that shows only stars. You type eight digits, the door stays shut, and you have no idea which digit was wrong, so you start again. Now imagine the same keypad with a small "peek" button: you hold it, see that you hit 7 instead of 8, fix it, and you are in. That peek button is the whole widget. The UK Government Digital Service added one to GOV.UK Accounts after users struggled to type passwords, and reported that it let th

The problem

Question presented to candidate: "Our sign-in form gets a lot of support tickets from people who mistype their password. Build a password field with a Show / Hide button next to it, so users can check what they typed. It has to be accessible and it must not make the password less safe. If you have time, warn the user when Caps Lock is on."

Requirements:

A labelled password input with a toggle button that switches between hidden and visible text.
The button says Show or Hide, has an accessible name ("Show password" / "Hide password") and must never submit the form.
Screen reader users are told when the password becomes visible or hidden.
A "Caps Lock is on" hint while typing with Caps Lock enabled.
When the form is submitted the password is hidden again; the value is never lost when toggling.

What a strong answer should cover:

The only way to reveal a password is switching the input type between password and text; one boolean of state drives it.
type="button" on the toggle, aria-controls, a changing accessible name (or aria-pressed, but not both), and a polite live region announcement.
Security details: autocomplete="current-password", spellcheck="false" and autocapitalize="none", and switching back to type="password" on submit.
Caps Lock detection with KeyboardEvent.getModifierState("CapsLock") on key events.
Keeping focus and the typed value stable when the type changes.

Clarifying questions expected:

"Is this a sign-in field (current password) or a new-password field with strength rules?"
"Should the password re-hide on its own after a few seconds, or only on submit?"

Code / implementation expected: Yes. A reusable password input component used inside a small sign-in form, in the framework of your choice.

Forms
Accessibility
State

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. Assumes basic HTML forms and a little JavaScript; React is explained as we go. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts with the precise vocabulary. The Verified output comes from mounting the solution with React 19.3.1 in jsdom and driving it with a script; facts about real browsers are either measured in Chromium 141 or cited.

1. Why This Even Matters — A Story First

Imagine entering a door code on a keypad that shows only stars. You type eight digits, the door stays shut, and you have no idea which digit was wrong, so you start again. Now imagine the same keypad with a small "peek" button: you hold it, see that you hit 7 instead of 8, fix it, and you are in.

That peek button is the whole widget. The UK Government Digital Service added one

The solution is hidden so you can try first

11 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useState } from "react";
import PasswordInput from "./src/components/PasswordInput";

// Simulated server: no network in the playground.
function fakeSignIn(username, password) {
  return new Promise((resolve) =>
    setTimeout(
      () => resolve({ ok: password.length >= 8, user: username }),
      300,
    ),
  );
}

export default function App() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [status, setStatus] = useState("idle");

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("loading");
    const res = await fakeSignIn(username, password);
    setStatus(
      res.ok
        ? "Signed in as " + res.user
        : "Password must be at least 8 characters",
    );
  }

  return (
    <main className="app">
      <h1>Sign in</h1>
      <form onSubmit={handleSubmit} className="card">
        <div className="field">
          <label htmlFor="username">Username</label>
          <input
            id="username"
            data-testid="username"
            autoComplete="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <PasswordInput value={password} onChange={setPassword} />
        <button
          type="submit"
          data-testid="submit"
          className="primary"
          disabled={status === "loading"}
        >
          {status === "loading" ? "Signing in…" : "Sign in"}
        </button>
        <p data-testid="status" role="status">
          {status === "idle" || status === "loading" ? "" : status}
        </p>
      </form>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.