Tailwind CSS Command Palette

Use the command component to show a searchable command palette, like a ⌘K menu for jumping to a page or running an action. For picking a form value from a list, reach for the combobox.

<div class="command w-full max-w-md rounded-lg border">
  <div class="input-group">
    <input class="input" placeholder="Search customers..." />
    <span class="input-group-addon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </span>
  </div>
  <div class="command-list">
    <div class="command-empty">No results found.</div>
    <div class="command-group">
      <div class="command-label">Search results (3)</div>
      <button class="command-item active">
        <span class="avatar avatar-sm">
          <img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
            alt="Leila Navarro"
          />
          <span class="avatar-fallback">LN</span>
        </span>
        <span class="font-medium">Leila Navarro</span>
        <span class="text-muted-foreground">[email protected]</span>
      </button>
      <button class="command-item">
        <span class="avatar avatar-sm">
          <img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
            alt="Theo Marchetti"
          />
          <span class="avatar-fallback">TM</span>
        </span>
        <span class="font-medium">Theo Marchetti</span>
        <span class="text-muted-foreground">[email protected]</span>
      </button>
      <button class="command-item">
        <span class="avatar avatar-sm">
          <img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
            alt="Maya Santoso"
          />
          <span class="avatar-fallback">MS</span>
        </span>
        <span class="font-medium">Maya Santoso</span>
        <span class="text-muted-foreground">[email protected]</span>
      </button>
    </div>
    <div class="command-separator"></div>
    <div class="command-group">
      <div class="command-label">Actions</div>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 21a8 8 0 0 1 13.292-6"/><circle cx="10" cy="8" r="5"/><path d="M19 16v6"/><path d="M22 19h-6"/></svg>
        <span>Add new customer</span>
        <span class="command-shortcut">⌘N</span>
      </button>
    </div>
  </div>
  <div
    class="flex h-10 items-center gap-4 border-t px-3 text-xs text-muted-foreground"
  >
    <span class="flex items-center gap-1.5">
      <kbd class="kbd">↑</kbd>
      <kbd class="kbd">↓</kbd>
      navigate
    </span>
    <span class="flex items-center gap-1.5">
      <kbd class="kbd">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3"><polyline points="9 10 4 15 9 20"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/></svg>
      </kbd>
      open
    </span>
    <span class="ms-auto flex items-center gap-1.5">
      <kbd class="kbd">esc</kbd>
      close
    </span>
  </div>
</div>

Usage

Add the command class to a container with an input group and a command-list inside, then fill the list with command-item buttons, grouped under command-group when it helps. Add a command-empty message for when nothing matches. Add active to an item to render it highlighted before the script runs.

Class	Description
`command`	Add to the palette container
`command-list`	Add to the scrollable list below the input
`command-group`	Add to a wrapper grouping related items
`command-label`	Add to a group's heading line
`command-item`	Add to each action, typically a `<button>`, with `active` on the highlighted one
`command-item-checked`	Add to `command-item` to show a trailing check
`command-shortcut`	Add to a `<span>` with the item's keyboard shortcut
`command-separator`	Add to a divider between groups
`command-empty`	Add to the message shown when nothing matches
`command-dialog`	Add to a dialog hosting a command

<div class="command">
  <div class="input-group">
    <input class="input" placeholder="Type a command or search..." />
  </div>
  <div class="command-list">
    <div class="command-empty">No results found.</div>
    <button class="command-item active">Calendar</button>
  </div>
</div>

Examples

Basic command palette

Grouped actions with shortcuts in a plain palette. Typing filters the list.

<div class="command max-w-sm rounded-lg border">
  <div class="input-group">
    <input class="input" placeholder="Type a command or search..." />
    <span class="input-group-addon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </span>
  </div>
  <div class="command-list">
    <div class="command-empty">No results found.</div>
    <div class="command-group">
      <div class="command-label">Suggestions</div>
      <button class="command-item active">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
        <span>Calendar</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
        <span>Search Emoji</span>
      </button>
      <button class="command-item" aria-disabled="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
        <span>Calculator</span>
      </button>
    </div>
    <div class="command-separator"></div>
    <div class="command-group">
      <div class="command-label">Settings</div>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>Profile</span>
        <span class="command-shortcut">⌘P</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        <span>Billing</span>
        <span class="command-shortcut">⌘B</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
        <span>Settings</span>
        <span class="command-shortcut">⌘S</span>
      </button>
    </div>
  </div>
</div>

Command dialog

Host the command in a dialog with command-dialog for the classic ⌘K palette, and name it with an sr-only title and description.

<button id="command-basic-trigger" class="btn btn-outline">Open Menu</button>
 
<dialog class="dialog command-dialog" data-sp-toggle="#command-basic-trigger">
  <div class="dialog-panel">
    <h2 class="dialog-title sr-only">Command Palette</h2>
    <p class="dialog-description sr-only">Search for a command to run...</p>
    <div class="command">
      <div class="input-group">
        <input class="input" placeholder="Type a command or search..." />
        <span class="input-group-addon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
        </span>
      </div>
      <div class="command-list">
        <div class="command-empty">No results found.</div>
        <div class="command-group">
          <div class="command-label">Suggestions</div>
          <button class="command-item active">
            <span>Calendar</span>
          </button>
          <button class="command-item">
            <span>Search Emoji</span>
          </button>
          <button class="command-item">
            <span>Calculator</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</dialog>

Open it from anywhere with a keyboard shortcut:

const palette = sp.dialog(document.querySelector("#my-command-dialog"));
document.addEventListener("keydown", (e) => {
  if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
    e.preventDefault();
    palette.toggle();
  }
});

Keyboard shortcuts

Show an item's key combination in a trailing command-shortcut.

<div class="command max-w-sm rounded-lg border">
  <div class="input-group">
    <input class="input" placeholder="Type a command or search..." />
    <span class="input-group-addon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </span>
  </div>
  <div class="command-list">
    <div class="command-empty">No results found.</div>
    <div class="command-group">
      <div class="command-label">Settings</div>
      <button class="command-item active">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>Profile</span>
        <span class="command-shortcut">⌘P</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        <span>Billing</span>
        <span class="command-shortcut">⌘B</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
        <span>Settings</span>
        <span class="command-shortcut">⌘S</span>
      </button>
    </div>
  </div>
</div>

Command groups

Group related items in a command-group with a command-label, and the group hides when the filter empties it.

<div class="command max-w-sm rounded-lg border">
  <div class="input-group">
    <input class="input" placeholder="Type a command or search..." />
    <span class="input-group-addon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </span>
  </div>
  <div class="command-list">
    <div class="command-empty">No results found.</div>
    <div class="command-group">
      <div class="command-label">Suggestions</div>
      <button class="command-item active">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
        <span>Calendar</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
        <span>Search Emoji</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
        <span>Calculator</span>
      </button>
    </div>
    <div class="command-separator"></div>
    <div class="command-group">
      <div class="command-label">Settings</div>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>Profile</span>
        <span class="command-shortcut">⌘P</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        <span>Billing</span>
        <span class="command-shortcut">⌘B</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
        <span>Settings</span>
        <span class="command-shortcut">⌘S</span>
      </button>
    </div>
  </div>
</div>

Disabled

Mark an item with aria-disabled to make it unselectable.

<div class="command max-w-sm rounded-lg border">
  <div class="input-group">
    <input class="input" placeholder="Type a command or search..." />
    <span class="input-group-addon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </span>
  </div>
  <div class="command-list">
    <div class="command-empty">No results found.</div>
    <div class="command-group">
      <div class="command-label">Actions</div>
      <button class="command-item active">New File</button>
      <button class="command-item">Duplicate</button>
      <button class="command-item" aria-disabled="true">Publish</button>
      <button class="command-item">Delete</button>
    </div>
  </div>
</div>

Scrollable list

The list scrolls past its max height, so long palettes stay compact.

<div class="command max-w-sm rounded-lg border">
  <div class="input-group">
    <input class="input" placeholder="Type a command or search..." />
    <span class="input-group-addon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </span>
  </div>
  <div class="command-list">
    <div class="command-empty">No results found.</div>
    <div class="command-group">
      <div class="command-label">Pages</div>
      <button class="command-item active">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
        <span>Inbox</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
        <span>Documents</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
        <span>Projects</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
        <span>Media Library</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
        <span>Notifications</span>
      </button>
    </div>
    <div class="command-separator"></div>
    <div class="command-group">
      <div class="command-label">Actions</div>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
        <span>New File</span>
        <span class="command-shortcut">⌘N</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
        <span>Copy</span>
        <span class="command-shortcut">⌘C</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>
        <span>Cut</span>
        <span class="command-shortcut">⌘X</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>
        <span>Paste</span>
        <span class="command-shortcut">⌘V</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
        <span>Delete</span>
      </button>
    </div>
    <div class="command-separator"></div>
    <div class="command-group">
      <div class="command-label">View</div>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
        <span>Grid View</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>
        <span>List View</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
        <span>Zoom In</span>
        <span class="command-shortcut">⌘+</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
        <span>Zoom Out</span>
        <span class="command-shortcut">⌘-</span>
      </button>
    </div>
  </div>
</div>

Async search

Set data-sp-filter="false" when your own code fills the list, like results fetched from a server. The command keeps wiring roles, highlighting the first result, and toggling the empty message while you add and remove items. Groups are yours to manage in this mode.

<div
  id="command-async-demo"
  class="command max-w-sm rounded-lg border"
  data-sp-filter="false"
>
  <div class="input-group">
    <input class="input" placeholder="Search components..." />
    <span class="input-group-addon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </span>
  </div>
  <div class="command-list">
    <div class="command-empty visible">No recent searches</div>
    <div class="command-group" hidden>
      <div class="command-label">Results</div>
    </div>
  </div>
</div>
 
<script>
  const command = document.querySelector("#command-async-demo");
const input = command.querySelector("input");
const group = command.querySelector(".command-group");
const empty = command.querySelector(".command-empty");
 
const components = [
  "Accordion",
  "Alert",
  "Avatar",
  "Badge",
  "Breadcrumb",
  "Button",
  "Card",
  "Checkbox",
  "Combobox",
  "Command",
  "Dialog",
  "Drawer",
  "Dropdown",
  "Empty",
  "Field",
  "Input",
  "Item",
  "Kbd",
  "Label",
  "Pagination",
  "Popover",
  "Progress",
  "Select",
  "Separator",
  "Sheet",
  "Sidebar",
  "Skeleton",
  "Slider",
  "Switch",
  "Table",
  "Tabs",
  "Textarea",
  "Toast",
  "Tooltip",
];
 
function render(names) {
  group.querySelectorAll(".command-item").forEach((item) => item.remove());
  group.hidden = names.length === 0;
  for (const name of names) {
    const item = document.createElement("button");
    item.className = "command-item";
    item.textContent = name;
    group.append(item);
  }
}
 
let timer;
input.addEventListener("input", () => {
  clearTimeout(timer);
  const query = input.value.trim().toLowerCase();
  if (!query) {
    empty.textContent = "No recent searches";
    render([]);
    return;
  }
  empty.textContent = "Searching...";
  timer = setTimeout(() => {
    empty.textContent = "No results found.";
    render(components.filter((name) => name.toLowerCase().includes(query)));
  }, 400);
});
</script>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="command-rtl-demo" dir="rtl" class="command max-w-sm rounded-lg border">
  <div class="input-group">
    <input
      class="input"
      placeholder="اكتب أمرًا أو ابحث..."
      data-i18n-placeholder="placeholder"
    />
    <span class="input-group-addon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </span>
  </div>
  <div class="command-list">
    <div class="command-empty" data-i18n="empty">لم يتم العثور على نتائج.</div>
    <div class="command-group">
      <div class="command-label" data-i18n="suggestions">اقتراحات</div>
      <button class="command-item active">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
        <span data-i18n="calendar">التقويم</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
        <span data-i18n="searchEmoji">البحث عن الرموز التعبيرية</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
        <span data-i18n="calculator">الآلة الحاسبة</span>
      </button>
    </div>
    <div class="command-separator"></div>
    <div class="command-group">
      <div class="command-label" data-i18n="settingsLabel">الإعدادات</div>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span data-i18n="profile">الملف الشخصي</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        <span data-i18n="billing">الفوترة</span>
      </button>
      <button class="command-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
        <span data-i18n="settings">الإعدادات</span>
      </button>
    </div>
  </div>
</div>
 
<script>
  const translations = {
  ar: {
    dir: "rtl",
    placeholder: "اكتب أمرًا أو ابحث...",
    empty: "لم يتم العثور على نتائج.",
    suggestions: "اقتراحات",
    calendar: "التقويم",
    searchEmoji: "البحث عن الرموز التعبيرية",
    calculator: "الآلة الحاسبة",
    settingsLabel: "الإعدادات",
    settings: "الإعدادات",
    profile: "الملف الشخصي",
    billing: "الفوترة",
  },
  he: {
    dir: "rtl",
    placeholder: "הקלד פקודה או חפש...",
    empty: "לא נמצאו תוצאות.",
    suggestions: "הצעות",
    calendar: "לוח שנה",
    searchEmoji: "חפש אמוג'י",
    calculator: "מחשבון",
    settingsLabel: "הגדרות",
    settings: "הגדרות",
    profile: "פרופיל",
    billing: "חיוב",
  },
  en: {
    dir: "ltr",
    placeholder: "Type a command or search...",
    empty: "No results found.",
    suggestions: "Suggestions",
    calendar: "Calendar",
    searchEmoji: "Search Emoji",
    calculator: "Calculator",
    settingsLabel: "Settings",
    settings: "Settings",
    profile: "Profile",
    billing: "Billing",
  },
};
window.addEventListener("message", (e) => {
  const t = translations[e.data?.lang];
  if (e.data?.type !== "sp-language" || !t) return;
  document.getElementById("command-rtl-demo").dir = t.dir;
  document.querySelectorAll("[data-i18n]").forEach((el) => {
    el.textContent = t[el.dataset.i18n];
  });
  document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
    el.placeholder = t[el.dataset.i18nPlaceholder];
  });
});
</script>

Options

Command

Set each option with its own data-sp-* attribute on the command element.

Attribute	Values	Default
`data-sp-filter`	`true`, `false`	`true`

Set data-sp-filter="false" when your own code fills the list. The command stops matching item text and instead tracks the list as it changes. See the async search example.

JavaScript

Events

Event	When
`sp-select`	An item was selected

document.querySelector(".command").addEventListener("sp-select", (e) => {
  console.log(e.detail.value);
});

Methods

Get the instance with sp.command(el), then call its methods:

Method	Description
`filter(query)`	Filter the list as if the user typed `query`
`run(item)`	Run an item element, firing `sp-select`
`refresh()`	Re-wire items and the highlight after changing the list