Build a Toggle Switch | Interview Question

Q: Build a Toggle Switch

**Target Audience:** Beginners preparing for a frontend machine coding round. You know basic React props and state; accessibility attributes are new territory. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1, in jsdom and in real Chromium. ## 1. Why This Even Matters — A Story First Think of the light switches in a house with a smart panel. The switch on the wall does not decide whether the light is on; it sends a request, and the panel decides. That is how the panel can enforce rules like "the garden lights stay off while the alarm is armed": the switch just shows what the panel says. A toggle switch component should work the same way. It shows checked , and when press

The problem

Question presented to candidate: "Build a reusable toggle switch, the on/off control you see in phone settings. I want to use it for a small settings panel: Notifications, Email digest and Sound. The Email digest switch should be disabled, and switched off, whenever Notifications is off. Make it accessible."

Requirements:

A reusable switch component with a visible label, a sliding knob, and a colour change between off and on.
Controlled: the parent passes checked and receives the new value through a change callback or event; the switch stores no state of its own.
A disabled state that cannot be toggled by click, keyboard or label.
Clicking the label toggles the switch; Tab reaches it, Space and Enter toggle it.
The settings panel enforces the rule "digest off and disabled when notifications are off" in the parent.

What a strong answer should cover:

The controlled component pattern and why the parent owns the value (it can veto or derive other values).
role="switch" with aria-checked on a native button, and why a button rather than a div.
Label association (label for plus a unique id from useId, Vue useId, or a counter), so the label is the accessible name and is clickable.
Disabled handling: the native attribute, plus a guard in the handler.
CSS-only knob animation with transform, and prefers-reduced-motion.

Clarifying questions expected:

"Should it be controlled, uncontrolled, or support both?"
"Does it need to work inside a form submission, like a checkbox?"
"Do you want an on/off text inside the track?"

Code / implementation expected: Yes. A reusable switch component plus a small panel using three of them, roughly 50-80 lines.

React
State
UI

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. You know basic React props and state; accessibility attributes are new territory. Difficulty: Easy

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1, in jsdom and in real Chromium.

1. Why This Even Matters — A Story First

Think of the light switches in a house with a smart panel. The switch on the wall does not decide whether the light is on; it sends a request, and the panel decides. That is how the panel can enforce rules like "the garden lights stay off while the alarm is armed": the switch just shows what the panel says.

A toggle s

The solution is hidden so you can try first

9 min read · 10 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 Switch from "./src/components/Switch";

const onOff = (v) => (v ? "on" : "off");

export default function App() {
  const [notifications, setNotifications] = useState(true);
  const [digest, setDigest] = useState(false);
  const [sound, setSound] = useState(false);

  // The parent owns the rule: turning
  // notifications off also turns the digest off.
  function changeNotifications(next) {
    setNotifications(next);
    if (!next) setDigest(false);
  }

  return (
    <main className="page">
      <h1>Settings</h1>
      <div className="panel">
        <Switch
          label="Notifications"
          checked={notifications}
          onChange={changeNotifications}
        />
        <Switch
          label="Email digest"
          checked={digest}
          onChange={setDigest}
          disabled={!notifications}
        />
        <Switch label="Sound" checked={sound} onChange={setSound} />
      </div>
      <p className="summary" data-testid="summary">
        Notifications {onOff(notifications)} · Email digest {onOff(digest)} ·
        Sound {onOff(sound)}
      </p>
    </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.