CodingLaboratory
Lab Commands
Enter The Lab

Component Lab / feedback-overlays / searchable-command-menu

Stable release
Back to category

Open experiment

Searchable command menu

A compact command surface with a real combobox relationship, grouped results, live match count, and shortcut hints. Typing filters commands, arrows move the active option, and Enter confirms without relying on pointer input.

Lab tested Responsive Dark mode Interactive
Version
1.0.0
Updated
2026-08-02
Dependencies
Zero
Live canvasInstant token updates
Source filesEditable and export-ready
<div class="cmp-command-menu">
  <label for="cmp-command-menu-input">Run a command</label>
  <div class="cmp-command-menu__search">
    <span aria-hidden="true">⌘</span
    ><input
      id="cmp-command-menu-input"
      type="text"
      role="combobox"
      aria-expanded="true"
      aria-controls="cmp-command-menu-list"
      aria-activedescendant="cmp-command-item-1"
      autocomplete="off"
      placeholder="Search actions..."
    /><kbd>⌘ K</kbd>
  </div>
  <ul id="cmp-command-menu-list" role="listbox" aria-label="Commands">
    <li
      role="option"
      id="cmp-command-item-1"
      aria-selected="true"
      data-search="create new experiment"
    >
      <span aria-hidden="true">＋</span><b>Create experiment</b><kbd>N</kbd>
    </li>
    <li
      role="option"
      id="cmp-command-item-2"
      aria-selected="false"
      data-search="open component catalog"
    >
      <span aria-hidden="true">⌕</span><b>Open component catalog</b><kbd>C</kbd>
    </li>
    <li role="option" id="cmp-command-item-3" aria-selected="false" data-search="toggle dark theme">
      <span aria-hidden="true">◐</span><b>Toggle theme</b><kbd>T</kbd>
    </li>
    <li
      role="option"
      id="cmp-command-item-4"
      aria-selected="false"
      data-search="export download zip"
    >
      <span aria-hidden="true">⇩</span><b>Export current ZIP</b><kbd>E</kbd>
    </li>
  </ul>
  <span class="cmp-command-menu__status" aria-live="polite">4 commands available</span>
</div>
No runtime reactions detected Open in Editor

Validated in the lab

Experiment report

  • Schema and source files passed
  • Responsive test passed
  • Keyboard test passed
  • No console errors

Component ingredients

Dependencies
None
Browser support
Current Chrome, Current Edge, Current Firefox, Current Safari
Version
1.0.0
Last tested
2026-08-02

Accessibility notes

  • The search field uses combobox and listbox relationships.
  • Active descendant follows arrow-key selection.
  • Match count and selection are announced politely.

License: MIT License for open-source use, modification, and distribution.

Continue testing

Related experiments