Select

Features

• Three independent fields on one stage, each driven by a data-mode attribute: single, multi, and search
• Single-select mode commits a value to the trigger label and closes the popup, marking the chosen row with a filled radio disc
• Multi-select mode keeps the popup open, tracks chosen values in a Set, lists the chosen values on the trigger label, and shows a count badge with a clear-all affordance
• Selected rows carry a primary-tinted background with an inset accent bar in addition to their filled radio/check marker, so every chosen option reads as selected at a glance
• Select all row with a three-state check: empty, filled tick when everything is chosen, and a dash when the selection is partial
• Search mode filters options as you type and scopes Select all to the rows currently visible
• Full keyboard navigation: arrows, Home, End, Enter, Space, Escape, Tab, and type-ahead matching on the option value
• Opening one field closes the other two; all fields close on outside click
• Reveal animation driven by opacity and transform only — never layout properties
• Fully respects prefers-reduced-motion

Accessibility

Combobox role

Single and multi triggers are role="combobox" with aria-haspopup="listbox", aria-controls, and aria-expanded

Listbox semantics

role="listbox" containing role="option" items with aria-selected; multi and search listboxes add aria-multiselectable

Active descendant

aria-activedescendant on the focused element — the trigger, or the search input when present — tracks the highlighted option and is dropped when the highlight clears

Search field

Labelled via aria-label and wired to its listbox with aria-controls

Accessible names

Each trigger carries an aria-label describing the field

Focus indicators

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

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Select in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input 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.