Command Palette

Use <ot-command> WebComponent. Provides a searchable command palette dialog triggered globally with ⌘K / Ctrl+K. Includes fuzzy filtering, keyboard navigation, and section grouping.

<ot-command>
  <dialog id="my-cmd" closedby="any">
    <input type="search" placeholder="Type a command...">
    <div role="listbox">
      <span>Navigation</span>
      <button role="option">Home</button>
      <button role="option">Dashboard</button>
      <button role="option">Settings</button>
      <span>Actions</span>
      <button role="option">New Project</button>
      <button role="option">Import Data</button>
    </div>
  </dialog>
</ot-command>

With icons and keyboard shortcuts

Add SVGs for icons and <kbd> for shortcut hints.

<button role="option">
  <svg>...</svg>
  New Project
  <kbd>⌘N</kbd>
</button>

Opening programmatically

Besides the global ⌘K shortcut, open via JavaScript:

document.querySelector('ot-command').open();

Handling selection

Listen for clicks on options:

document.querySelector('ot-command [role="listbox"]').addEventListener('click', e => {
  const option = e.target.closest('[role="option"]');
  if (option) console.log('Selected:', option.textContent);
});

Keyboard navigation

Structure