Build a Custom Multi-select Dropdown | Interview Question

Q: Build a Custom Multi-select Dropdown

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes React state and props; sets, chips, focus handling and multi-select ARIA are explained from zero. **Difficulty:** Medium > **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. The Verified output was produced by running the solution on React 19.3.1 in jsdom with a driver that clicked, typed and pressed keys. ## 1. Why This Even Matters — A Story First At a salad bar you walk along the counter with a bowl, adding things you like. You do not walk back to the start after each topping; you keep going. If you change your mind, you pick the olives back out. At the till, the receipt lists your toppings in the counter's order, not the order you grabbed them. A multi-select dropdown is that salad bar: the list **stays open** while you pick, every pick shows up as a removable

The problem

Question presented to candidate: "Our profile form needs a 'Skills' picker. Users open a dropdown, filter by typing, and pick as many skills as they like; picked skills appear as chips in the field and each chip can be removed. It must work with the keyboard and close when you click away."

Requirements:

A field showing the selected values as chips (each with a remove button) followed by a search input; the dropdown lists options with a checkmark for selected ones.
Typing filters options; Up / Down move the highlight; Enter toggles the highlighted option and the dropdown stays open for more picks; Escape closes.
Backspace in an empty search removes the last chip; removing a chip returns focus to the input.
"Select all shown" adds every currently visible option (disabled when they are all selected already); "Clear all" empties the selection.
The emitted value is an array of option ids in the options order, whatever order they were clicked in; close on an outside press or when focus leaves; announce changes politely.

What a strong answer should cover:

Controlled value (array of ids) with a Set derived for O(1) membership checks while rendering.
Normalising the value to the options order so the output is stable.
A listbox with aria-multiselectable="true" where aria-selected means chosen (unlike a single-select popup, where it marks the highlighted option), and aria-activedescendant for the highlight.
Focus management for chip removal and Backspace, and mousedown preventDefault on options.
Outside-press and focus-leave closing, and a live region for "React selected. 3 selected."

Clarifying questions expected:

"Is there a maximum number of selections?"
"Should the selection order matter, or is the options order fine?"
"Do 'Select all' and 'Clear' apply to the filtered options or to everything?"

Code / implementation expected: Yes. A reusable, controlled multi-select component with chips, filtering and keyboard support.

React
Dropdown
Accessibility

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: Frontend developers preparing for a machine coding round. Assumes React state and props; sets, chips, focus handling and multi-select ARIA are explained from zero. Difficulty: Medium

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. The Verified output was produced by running the solution on React 19.3.1 in jsdom with a driver that clicked, typed and pressed keys.

1. Why This Even Matters — A Story First

At a salad bar you walk along the counter with a bowl, adding things you like. You do not walk back to the start after each topping; you keep going. If you change your mind, you pick the olives back out. At the till, the receipt lists your toppings in the counter's order, not the order you grabbed them.

A multi-select dropdown is tha

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 { useState } from "react";
import MultiSelect from "./src/components/MultiSelect";
import { SKILLS } from "./src/utils/skills";

export default function App() {
  const [skills, setSkills] = useState([]);
  return (
    <main className="page">
      <h1>Your skills</h1>
      <MultiSelect
        label="Skills"
        options={SKILLS}
        value={skills}
        onChange={setSkills}
      />
      <p className="value" data-testid="value">
        Value: {JSON.stringify(skills)}
      </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.