Interactivity

Command palette

Build accessible, keyboard-first Cmd+K / Ctrl+K search and action modals with real-time query filtering across vanilla JS and all framework adapters.

Cmd+K / Ctrl+KUniversal parityv0.7.0 current

Interactivity

Command palette architecture

The command palette is an accessible dialog with search input, group headers, icons, keyboard shortcuts, and live filtering.

Example

HTML · Command palette

<button class="bs-btn bs-btn-secondary" type="button" data-bs-toggle="command-palette" data-bs-target="#my-command-palette">
  <kbd class="bs-badge bs-badge-subtle">Cmd+K</kbd> Open command palette
</button>

<dialog class="bs-dialog bs-command-palette" id="my-command-palette" aria-label="Command palette">
  <div class="bs-command-palette-header">
    <input class="bs-input bs-command-palette-input" type="search" placeholder="Type a command or search..." />
  </div>
  <div class="bs-command-palette-list" role="listbox">
    <div class="bs-command-palette-group">
      <div class="bs-command-palette-group-title">Navigation</div>
      <button class="bs-command-palette-item" type="button" role="option">
        <span class="bs-command-palette-item-label">Documentation</span>
      </button>
    </div>
  </div>
</dialog>

Framework adapters

Available as initCommandPalettes() in vanilla JS, x-data="commandPalette()" in Alpine, useCommandPalette() in React and Vue, and createCommandPalette() in Svelte.

Command Palette API

Command palette components combine modal dialog containers, header search inputs, grouped listboxes, and shortcut indicators.

Class / Data Attribute	Purpose
`.bs-command-palette`	Modal dialog shell configured with fixed top positioning, max-width constraints, and drop shadows.
`.bs-command-palette-header`	Top search bar container holding the query input and optional leading search icon.
`.bs-command-palette-input`	Frameless search input field with autofocus and auto-filtering behavior.
`.bs-command-palette-list`	Scrollable results listbox holding grouped action items.
`.bs-command-palette-group`	Section container organizing related action commands.
`.bs-command-palette-group-title`	Category header title text for command groups.
`.bs-command-palette-item`	Interactive action option row with hover, active, and keyboard selection states.
`.bs-command-palette-item-label`	Primary label text for a command item.
`.bs-command-palette-item-shortcut`	Keyboard shortcut key combination badge positioned at the end of a command row.
`data-bs-toggle="command-palette"`	Declarative trigger attribute to open a targeted command palette modal.