Build a Custom Multi-select Dropdown

Question

Accepted Answer

## Building a Multi-select Dropdown in React

**Mental model:** A multi-select is a toggleable panel of checkable options where the selection is a `Set` of values. The trigger summarizes the selection ("2 selected"); the panel toggles membership. Close on outside-click. Keep it controlled — parent owns the selected array.

### Step 1 — Open state + selection as a Set
```jsx
const [open, setOpen] = useState(false);
const selectedSet = new Set(value);
```

### Step 2 — Toggle membership
```jsx
const toggle = (v) => {
  const next = new Set(value);
  next.has(v) ? next.delete(v) : next.add(v);
  onChange([...next]);
};
```

### Step 3 — Close on outside click
A document `mousedown` listener that closes when the click is outside the root ref.

```jsx
useEffect(() => {
  const onDoc = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); };
  document.addEventListener('mousedown', onDoc);
  return () => document.removeEventListener('mousedown', onDoc);
}, []);
```

Build a Custom Multi-select Dropdown

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)