Multi Select Input

Multi-select Input

Choose multiple items from a list

What it solves

A Multi-select Input is a form component that allows users to select multiple items from a predefined set of options. It differs from an autocomplete (which suggests options for freeform entry) by working with a bounded, known list of options — users can only select what exists in the list. The most common visual implementation is a tag/chip-based selector: selected items appear as removable tags inside the input field, and remaining options are shown in a dropdown. Additional patterns include checkbox lists, dual listboxes, and native <select multiple>.

When to use

• Category and tag assignment – Assigning tags, labels, or categories to content.
• Permissions and role management – Selecting multiple roles for a user.
• Filter panels – Letting users apply multiple filters simultaneously.
• Recipient selection – Choosing multiple email recipients from a contact list.
• Feature selection – Configuring which features/modules to enable.

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