Build a Combobox (search + select)

Question

Accepted Answer

## 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 value separately.

### Step 1 — Query, open, value
```jsx
const [query, setQuery] = useState('');
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
```

### Step 2 — Filter while typing, full list when idle
```jsx
const filtered = open && query
  ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
  : options;
```

### Step 3 — Commit a selection
Selecting sets the value and syncs the input to its label.

```jsx
const select = (o) => { setValue(o); setQuery(o.label); setOpen(false); };
```

### Step 4 — Keyboard + clear
Arrow/Enter navigate; a clear button resets value and query.

```jsx
const clear = () => { setV

Build a Combobox (search + select)

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)