use UI

Multi-select Input

Also called token input, tag input, chips input, multi combobox

A field holding several selected values at once, each shown as a chip that can be removed.

Example

Reviewers

  • Grace Hopper

    1 of 5 selected. Backspace in the empty field removes the last one.

    Removals and additions are announced here.

    These chips look like the tags on the Tag page and are a different thing: each one is part of the value this field will submit, so each one carries a remove button named after the value it removes — not a row of identical crosses.

    When to use it

    • A field takes several values from a known set — reviewers, labels, recipients, skills.
    • The chosen values must stay visible while more are added, so the user can see what they already picked.
    • The list is long enough that typing to narrow it beats scrolling.

    When not to

    • There are five options or fewer. A checkbox group shows them all at once with no typing and no hidden state.
    • Only one value is allowed. That is a select or a combobox, and letting people add a second one just to reject it later is cruel.
    • The values are free text with no vocabulary behind them. That is a text field; chips imply a set to choose from.

    Trade-offs

    • Selected values stay on screen, which prevents the “did I already add that?” loop of a plain multi-select listbox.
    • Each value is individually removable, so correcting one mistake does not mean redoing the whole field.
    • Typing narrows a long list without leaving the field.
    • Height changes as chips are added, and a growing field pushes the rest of the form around.
    • Genuinely hard to make accessible: it is a composite of a text input, a listbox and a list of buttons.
    • Many chips become their own scanning problem — past a dozen, the field is harder to read than a list would be.

    Accessibility

    What this pattern needs in order to work for everyone.

    Keyboard
    • Backspace on an empty input removes the last chip. It is the behaviour people expect from email fields, and its absence is felt immediately.
    • Every chip needs a reachable remove control — a tiny × that only responds to the mouse strands keyboard users with a value they cannot delete.
    • Decide where focus goes after a removal and be consistent. Returning it to the input is the safe default; leaving it on a removed node is a dead focus.
    Roles and state
    • The remove button's name must include the value: “Remove TypeScript”, never a bare “Remove” repeated six times.
    • Put the chips in a `<ul>`, one `<li>` each, so the number of selected values is announced before they are read out.
    • Announce removals in a polite live region. Without it, pressing Backspace deletes something with no feedback at all.
    • The input keeps its own label. “Reviewers” must still be announced when focus lands in a field already full of chips.
    Focus
    Clicking anywhere in the field focuses the text input, including the empty space beside the chips — the whole box should behave like one field.

    In the wild

    • GitHub reviewers — Type to filter, chips for the chosen reviewers, each removable with a named button.
    • Gmail recipients — The canonical Backspace behaviour: an empty field plus Backspace removes the last address.

    Compared with

    Side-by-side breakdowns of patterns that solve a similar problem.