Multi Select Input

When to avoid

• Freeform text with suggestions – Use Autocomplete instead.
• Single selection from a small list – Use a Select/Dropdown or Radio group.
• Binary choices – Use Checkboxes.
• Very large option sets (> 1000 items) – Use a virtualized list or search-first approach.

Implementation workflow

1. Confirm the pattern matches the problem and constraints before copying the example.
2. Start from the anatomy and examples in references/pattern.md, then choose the smallest viable variation.
3. Apply accessibility, performance, and interaction guardrails before layering visual polish.
4. Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.

Accessibility guardrails

Keyboard Interaction Pattern

Performance guardrails

• Dropdown open time: < 100ms
• Option filtering (search): < 50ms for lists up to 1000 items
• Tag addition rendering: < 16ms (one frame)
• Select All operation: < 50ms for 100 items
• Memory per instance: < 15KB for component; virtualize options list for > 500 items

Common mistakes

Using <select multiple>

The Problem: Native <select multiple> requires Ctrl+Click (or Cmd+Click) to select multiple items, which is an unintuitive interaction that most users are unaware of.

<!-- Bad: Requires Ctrl+click — users don't know this -->
<select multiple name="skills[]">
  <option>React</option>
  <option>TypeScript</option>
</select>

How to Fix It? Use a custom multi-select component with checkboxes or a tag-based UI.

Closing the Dropdown After Each Selection

The Problem: If the dropdown closes every time the user selects an option, they must reopen it for each additional selection — significantly slowing down multi-item workflows.

How to Fix It? Keep the dropdown open after selection; close only on Escape or external click.

option.addEventListener('click', (e) => {
  e.stopPropagation(); // Prevent close-on-outside-click from triggering
  toggleOptionSelection(option);
  updateTags();
  searchInput.focus(); // Keep focus in the input
  // DO NOT close the dropdown here
});

Not Handling Backspace for Tag Removal

The Problem: Users expect Backspace in an empty search input to remove the last selected tag. Omitting this makes the component feel incomplete and forces mouse usage.

How to Fix It? Listen for keydown on the search input.

searchInput.addEventListener('keydown', (e) => {
  if (e.key === 'Backspace' && searchInput.value === '') {
    const lastTag = getLastSelectedItem();
    if (lastTag) {
      removeSelection(lastTag);
    }
  }
});

Related patterns

• https://uxpatterns.dev/patterns/forms/autocomplete
• https://uxpatterns.dev/patterns/forms/checkbox
• https://uxpatterns.dev/patterns/forms/radio
• https://uxpatterns.dev/patterns/forms/selection-input

For full implementation detail, examples, and testing notes, see references/pattern.md.

Pattern page: https://uxpatterns.dev/patterns/forms/multi-select-input