hardMachine Coding

Build a Combobox (search + select)

Q: Build a Combobox (search + select)

**Requirements** - A text input that filters a dropdown of options; select with mouse or keyboard (↑/↓/Enter/Esc). - Highlight the active option; show selected value; support async options. **What interviewers look for:** ARIA combobox pattern, active-descendant keyboard nav, filtering, outside-click close. *Reference solution and live playground coming soon.*

92 views

Understand the problem

Build an accessible combobox that filters and selects an option.

ReactComboboxAsync

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

Study the solution

Solve in

Building a Combobox (search + select) in React

Mental model: A combobox is single-select: an input that filters a list and commits one chosen value. Differs from a free autocomplete in that the input reflects the selected option and reopening shows the full list. Track the query, open state, and the committed

Solution ready — 2 min read

Classified // press E to declassify

React solution

Complete solutionRun Playground

import React from 'react';
import Combobox from './src/Combobox';

const options = [
  { value: 'us', label: 'United States' },
  { value: 'ca', label: 'Canada' },
  { value: 'mx', label: 'Mexico' },
  { value: 'br', label: 'Brazil' },
  { value: 'gb', label: 'United Kingdom' },
  { value: 'de', label: 'Germany' },
  { value: 'fr', label: 'France' },
  { value: 'jp', label: 'Japan' },
];

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20 }}>
      <h1>Combobox Demo</h1>
      <Combobox options={options} placeholder="Choose a country…" />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 87 of 87 decoded in the Frontend Machine Coding track. One more won't hurt.

Back to track

Track complete

You decoded the whole Frontend Machine Coding. Legend.

Pick another arena