Multi-Select Dropdown

Features

• Multi-selectable listbox with grouped sections, Tabler icon tiles and aria-selected options
• Live match highlighting — the filtered substring is underlined inside each option label
• Selected values become removable chips; beyond three they collapse into a +N more overflow pill
• Gradient selection meter along the panel's top hairline that fills with the selected fraction
• Select all (of the filtered set) and Clear actions with an N of M live count in the panel head
• Gradient hairline focus ring around the trigger, masked so the surface stays solid
• Check mark that draws on via stroke with a spring reveal on selection
• Panel that springs open from the trigger edge with scale, blur and a shadow lift
• Staggered option reveal with a leading gradient accent bar on hover and keyboard focus
• Empty state with a Clear search action, plus keyboard hints in the panel footer
• Full keyboard support: type to filter, Arrow/Home/End to move, Enter or Space to toggle, Backspace removes the last chip, Escape closes
• Responsive control that adapts down to 280px and fully respects prefers-reduced-motion

Accessibility

Multi-select listbox

The list uses role="listbox" with aria-multiselectable; options use role="option" with aria-selected

Grouped options

Each section uses role="group" labelled by its sticky group heading via aria-labelledby

Combobox trigger

The input uses role="combobox" with aria-expanded, aria-controls, aria-haspopup and aria-autocomplete

Roving focus

Focus stays on the input; the active option is exposed via aria-activedescendant

Removable chips

Each chip has a labelled remove button; the overflow pill exposes aria-expanded

Live status

The status line uses aria-live="polite" to announce the selection

Focus indicators

:focus-visible with --ring outline on all interactive elements

Target sizes

All interactive controls, including chip remove buttons, are at least 24×24px

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Multi-Select Dropdown in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dropdown menu is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.