---
name: command-palette
category: overlays
summary: "Cmd/Ctrl+K searchable, grouped command panel"
subpath: "@42/core/command-palette"
deepDoc: docs/llm/command-palette.md
---

Cmd/Ctrl+K search panel with filterable, grouped commands (combobox/listbox).

```html
<div data-c42-command-palette>
  <div data-c42-command-overlay></div>
  <div data-c42-command-dialog>
    <input data-c42-command-input placeholder="Type a command…" />
    <div data-c42-command-list>
      <div data-c42-command-group data-label="Files">
        <button data-c42-command-item data-value="new" data-keywords="create">New File</button>
        <button data-c42-command-item data-value="open">Open File…</button>
      </div>
      <div data-c42-command-empty>No results</div>
    </div>
  </div>
</div>
```

```ts
import { CommandPalette } from '@42/core/command-palette';
const palette = new CommandPalette(root, { hotkey: 'k' });
palette.on('commandpalette:select', (e) => console.log(e.detail.value));
```

Keyboard: ⌘/Ctrl+K toggles; type to filter (label + `data-keywords`); ArrowUp/Down + Home/End move the highlight; Enter selects; Escape closes.
Options: `defaultOpen` (false), `hotkey` (`'k'`, `null` to disable), `closeOnOverlayClick` (true), `closeOnEscape` (true), `clearOnClose` (true), `filter(query, text)`
Methods: `openPalette()`, `close()`, `toggle()`, `isOpen`, `activeItem`
Events: `commandpalette:open`, `commandpalette:close`, `commandpalette:select` → `{ value, item }`, `commandpalette:filter` → `{ query, count }`