Command

A searchable command palette for quick navigation and actions, with keyboard support and dialog mode.

?

Name	Category	Description	Type	Default
maxHeight	? Style	Maximum list height	string	'300px'
disabled	? State	Whether the item is disabled	boolean	false
modelValue / v-model	? State	Whether the dialog is open	boolean	false
filter	? Behavior	Custom filter function	(value: string, search: string, keywords?: string[]) => boolean	—
shortcut	? Behavior	Enable Ctrl+K keyboard shortcut	boolean	true
ArrowDown	? Behavior	Highlight next item		—
ArrowUp	? Behavior	Highlight previous item		—
Enter	? Behavior	Select highlighted item		—
Escape	? Behavior	Close dialog		—
Ctrl+K / Cmd+K	? Behavior	Toggle command dialog		—
modelValue / v-model	? Content	Search text	string	''
label	? Content	Aria label for accessibility	string	—
placeholder	? Content	Input placeholder text	string	''
icon	? Content	Search icon name	string	'search'
value	? Content	Unique item value (required)	string	—
keywords	? Content	Additional search keywords	string[]	[]
icon	? Content	Item icon	string	—
shortcut	? Content	Shortcut key labels	string[]	[]
heading	? Content	Group heading text	string	—
update:modelValue	? Event	Emitted when search text changes	(value: string) => void	—
select	? Event	Emitted when an item is selected	(value: string) => void	—
update:modelValue	? Event	Emitted when dialog state changes	(value: boolean) => void	—
open	? Event	Emitted when dialog opens	() => void	—
close	? Event	Emitted when dialog closes	() => void	—

Basic Usage

A simple command menu with search filtering.

<template>
  <px-command label="Command menu">
    <px-command-input placeholder="Type a command or search..." />
    <px-command-list>
      <px-command-empty>No results found.</px-command-empty>
      <px-command-item value="calendar" icon="calendar">Calendar</px-command-item>
      <px-command-item value="search" icon="search">Search</px-command-item>
      <px-command-item value="settings" icon="settings">Settings</px-command-item>
      <px-command-item value="profile" icon="user">Profile</px-command-item>
    </px-command-list>
  </px-command>
</template>

<style scoped>
.px-command {
  max-width: 480px;
}
</style>

Grouped Items

Use CommandGroup to organize items with headings and CommandSeparator for visual dividers.

<template>
  <px-command label="Grouped command menu">
    <px-command-input placeholder="Search commands..." />
    <px-command-list>
      <px-command-empty>No results found.</px-command-empty>
      <px-command-group heading="Navigation">
        <px-command-item value="home" icon="home">Home</px-command-item>
        <px-command-item value="dashboard" icon="analytics">Dashboard</px-command-item>
        <px-command-item value="settings" icon="settings">Settings</px-command-item>
      </px-command-group>
      <px-command-separator />
      <px-command-group heading="Actions">
        <px-command-item value="new-file" icon="add-box">New File</px-command-item>
        <px-command-item value="upload" icon="upload">Upload</px-command-item>
        <px-command-item value="download" icon="download">Download</px-command-item>
      </px-command-group>
    </px-command-list>
  </px-command>
</template>

<style scoped>
.px-command {
  max-width: 480px;
}
</style>

Dialog Mode

Use CommandDialog to show the command palette in a modal overlay. Press Ctrl+K (or Cmd+K on Mac) to toggle.

<template>
  <div>
    <px-button type="primary" @click="open = true">
      Open Command Palette
      <px-badge size="small" type="info">Ctrl+K</px-badge>
    </px-button>

    <px-command-dialog v-model="open">
      <px-command @select="onSelect" label="Command palette">
        <px-command-input placeholder="What do you need?" />
        <px-command-list>
          <px-command-empty>No results found.</px-command-empty>
          <px-command-group heading="Pages">
            <px-command-item value="home" icon="home" :shortcut="['Ctrl', 'H']">Home</px-command-item>
            <px-command-item value="docs" icon="bookmark" :shortcut="['Ctrl', 'D']">Documentation</px-command-item>
          </px-command-group>
          <px-command-separator />
          <px-command-group heading="Theme">
            <px-command-item value="light" icon="sun">Light Mode</px-command-item>
            <px-command-item value="dark" icon="moon">Dark Mode</px-command-item>
          </px-command-group>
        </px-command-list>
      </px-command>
    </px-command-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const open = ref(false);

function onSelect() {
  open.value = false;
}
</script>

Custom Filter

Provide a custom filter function for advanced matching (e.g., fuzzy search).

<template>
  <px-command :filter="fuzzyFilter" label="Custom filter">
    <px-command-input placeholder="Try fuzzy search..." />
    <px-command-list>
      <px-command-empty>No matches.</px-command-empty>
      <px-command-item value="calendar">Calendar</px-command-item>
      <px-command-item value="calculator">Calculator</px-command-item>
      <px-command-item value="contacts">Contacts</px-command-item>
      <px-command-item value="configuration">Configuration</px-command-item>
    </px-command-list>
  </px-command>
</template>

<script setup lang="ts">
function fuzzyFilter(value: string, search: string): boolean {
  if (!search) return true;
  const chars = search.toLowerCase().split('');
  let idx = 0;
  for (const char of value.toLowerCase()) {
    if (char === chars[idx]) idx++;
    if (idx === chars.length) return true;
  }
  return false;
}
</script>

<style scoped>
.px-command {
  max-width: 480px;
}
</style>

Disabled Items

Set disabled on items to prevent selection. Disabled items are skipped during keyboard navigation.

<template>
  <px-command label="Command with disabled items">
    <px-command-input placeholder="Search..." />
    <px-command-list>
      <px-command-item value="save" icon="check">Save</px-command-item>
      <px-command-item value="delete" icon="close" disabled>Delete (Disabled)</px-command-item>
      <px-command-item value="export" icon="download">Export</px-command-item>
      <px-command-item value="archive" icon="archive" disabled>Archive (Disabled)</px-command-item>
    </px-command-list>
  </px-command>
</template>

<style scoped>
.px-command {
  max-width: 480px;
}
</style>