Build a Tag / Chip Input

Question

Accepted Answer

## Building a Tag / Chip Input in React

**Mental model:** A tag input is an array of strings rendered as chips, plus a text field. Enter (or comma) commits the current text as a chip; Backspace on an empty field removes the last chip. Dedupe and trim on commit. Keep it controlled so the parent owns the tags.

### Step 1 — Tags + draft state
```jsx
const [tags, setTags] = useState(value);
const [draft, setDraft] = useState('');
```

### Step 2 — Commit on Enter / comma
Trim, ignore empties, dedupe, then clear the draft.

```jsx
const commit = () => {
  const t = draft.trim();
  if (t && !tags.includes(t)) setTags((prev) => [...prev, t]);
  setDraft('');
};
```

### Step 3 — Backspace removes the last chip
Only when the field is empty, so you don't fight normal text editing.

```jsx
const onKeyDown = (e) => {
  if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); commit(); }
  else if (e.key === 'Backspace' && !draft) setTags((p) => p.slice(0, -1));
};
```

### Step 4 — Render

Build a Tag / Chip Input

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)