Build a Tabs component | Interview Question

Q: Build a Tabs component

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`); the accessibility pattern is explained from zero. **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 words an interviewer listens for. Code excerpts come from the runnable solution; the Verified blocks are real output from React 19.3.1 in StrictMode (jsdom) and from real Chromium 141 for focus movement. ## 1. Why This Even Matters — A Story First A ring binder with coloured dividers lets you flip straight to "Profile", "Notes" or "Billing". The dividers are always visible along the edge; only one section is open in front of you. You can also run your thumb along the dividers to find the one you want. **Tabs** are those dividers on screen. Almost every settings page has them, which is why "build a tabs component" is a favourite easy question. The vi

The problem

Question presented to candidate: "Build a reusable Tabs component. It takes a list of tabs, shows one panel at a time, and lets the user switch by clicking or with the keyboard. It should follow the WAI-ARIA tabs pattern so screen-reader and keyboard users get the same experience as mouse users."

Requirements:

Driven by a config array (id, label, content); a defaultActive id picks the first selected tab, falling back to the first tab.
Clicking a tab selects it and shows its panel; only the selected panel is visible.
WAI-ARIA roles and wiring: tablist with an accessible name, tab buttons with aria-selected and aria-controls, tabpanel elements with aria-labelledby.
Roving tabindex: only the selected tab is in the Tab order (tabindex="0"); the others have -1.
Keyboard: Arrow Right and Arrow Left move to the next and previous tab and wrap; Home and End go to the first and last; focus and selection move together (automatic activation).
Switching tabs must not lose what the user typed in a panel.

What a strong answer should cover:

One piece of state (the active id); everything else (which panel shows, aria-selected, tabindex) derived from it.
The roles, the id wiring between tabs and panels, and why a tablist needs a label.
Roving tabindex: why Tab should enter the tab list once and then jump to the panel, while arrows move inside the list.
Automatic versus manual activation and when each is appropriate.
Hiding inactive panels (hidden, v-show) versus unmounting them, and the effect on panel state.

Clarifying questions expected:

"Should arrow keys select a tab immediately, or only move focus until Enter is pressed?"
"Can tabs be disabled, added or removed at runtime?"
"Is it fine to render every panel up front, or are some panels expensive?"

Code / implementation expected: Yes. A working component with a three-tab demo, one of which holds a form field to prove state survives switching.

React
UI
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. You need basic React (props, useState); the accessibility pattern is explained from zero. 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 words an interviewer listens for. Code excerpts come from the runnable solution; the Verified blocks are real output from React 19.3.1 in StrictMode (jsdom) and from real Chromium 141 for focus movement.

1. Why This Even Matters — A Story First

A ring binder with coloured dividers lets you flip straight to "Profile", "Notes" or "Billing". The dividers are always visible along the edge; only one section is open in front of you. You can also run your thumb along the dividers to find the one you want.

Tabs are those dividers on screen. Almost every settings pa

The solution is hidden so you can try first

10 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 Tabs from "./src/components/Tabs";

const TABS = [
  {
    id: "profile",
    label: "Profile",
    content: <p>Ada Lovelace, ada@example.com. Member since 2021.</p>,
  },
  {
    id: "notes",
    label: "Notes",
    content: (
      <label className="field">
        Private notes
        <textarea
          rows={3}
          placeholder="Type something, switch tabs, come back"
        />
      </label>
    ),
  },
  {
    id: "billing",
    label: "Billing",
    content: <p>Plan: Pro, billed yearly. Next invoice on 1 March.</p>,
  },
];

export default function App() {
  return (
    <main className="page">
      <h1>Account</h1>
      <Tabs tabs={TABS} defaultActive="profile" label="Account sections" />
    </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.