Searchable Dropdown

Features

• Trigger button that opens a panel with a live command-style search input in Spline Sans Mono
• Real substring filtering of options as you type, with the matched run underlined in match-signal green
• Live mono result counter (3/13) that turns green while a query is active
• Skeleton rows with a shimmering sweep while the model list resolves through the async seam
• Arrow-key navigation, Enter to select and Escape to close from the search field
• Considered empty state — search-off icon, mono 0 matches line and a retry hint
• Quiet graphite initial chips that flip to signal green on the active, hovered and selected rows
• Springy panel reveal via transform and opacity, springy press compression on trigger and rows
• Selected option reflected in the trigger chip and a visible status line
• Outside-click close with focus return to the trigger
• Fully respects prefers-reduced-motion

Accessibility

Combobox trigger

The trigger uses aria-haspopup="listbox", aria-expanded and aria-controls

Listbox semantics

The list uses role="listbox" and options use role="option"

Search labelling

The input has an aria-label and aria-controls for the list

Live status

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

Decorative counter

The mono result counter is aria-hidden — the empty state carries the zero-result signal

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 Searchable 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.