# Searchable Dropdown

> A Grepline searchable dropdown — a command-style mono search input filters models as you type, every match run underlined in the accent with a live result counter, plus skeleton loading rows, arrow-key navigation, Enter to select and Escape to close.

- Category: Dropdown Menu
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: search, combobox
- Page: https://builder.atheros.ai/components/dropdown-search
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_dropdown_search/preview-be6942206c3a.webp

## 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

## Keyboard shortcuts

- `ArrowDown` — Move highlight to the next option
- `ArrowUp` — Move highlight to the previous option
- `Enter` — Select the highlighted option
- `Escape` — Close the panel and return focus to the trigger

## Common questions

**Which frameworks is Searchable Dropdown available in?**

Searchable Dropdown ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Searchable Dropdown dropdown menu component free?**

Searchable Dropdown is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Searchable Dropdown support dark mode?**

Yes. Searchable Dropdown ships light and dark themes, both drawn from the Orchard design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Searchable Dropdown live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/dropdown-search

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt