ContextQMD
Back to Vuetify

Command Palettes

packages/docs/src/pages/en/components/command-palettes.md

4.1.63.6 KB
Original Source

Command Palettes

The v-command-palette component provides a keyboard-driven command interface that allows users to quickly search and execute commands. It's commonly used for quick navigation, command execution, and power-user workflows.

<PageFeatures />

::: success This feature was introduced in v4.0, is a labs component and is available for testing and feedback. :::

Installation

Labs components require manual import and registration with the Vuetify instance.

js
import { VCommandPalette } from 'vuetify/labs/VCommandPalette'

export default createVuetify({
  components: {
    VCommandPalette,
  },
})

Usage

The command palette displays a searchable list of commands in a dialog. Users can type to filter items and press Enter or click to execute commands.

<ExamplesUsage name="v-command-palette" /> <PromotedEntry />

API

ComponentDescription
v-command-palettePrimary Component
v-dialogBase Component
<ApiInline hide-links />

Examples

Below is a collection of simple to complex examples.

Props

Items

The items prop accepts an array of command palette items. Items support action items (interactive commands), subheaders (section labels), and dividers (visual separators).

<ExamplesExample file="v-command-palette/prop-items" />

Hotkey

Use the hotkey prop to register a global keyboard shortcut that toggles the command palette. Individual items can also have their own hotkey property for quick access.

<ExamplesExample file="v-command-palette/prop-hotkey" />

Controlled close behavior

By default, selecting an actionable item closes the palette. Use close-on-select to disable that behavior, or handle @before-select and call preventDefault() to keep the palette open for external drill-in flows.

<ExamplesExample file="v-command-palette/prop-close-on-select" />

Slots

The command palette provides several slots for customizing the display of items and other elements.

Item prepend

Use the #item.prepend slot to customize the prepend area of each item. This slot receives the current item and index as slot props.

<ExamplesExample file="v-command-palette/slot-item-prepend" />

Item append

Similarly #item.append slot and allows you to include supplemental information (replaces hotkey).

<ExamplesExample file="v-command-palette/slot-item-append" />

Filtering

The search input automatically filters items based on their title and subtitle properties. Use v-model:search to control or monitor the search query. The filter-keys prop can customize which item properties are searched.

The placeholder prop customizes the search input's placeholder text, while no-data-text customizes the message shown when no items match the search query.

Keyboard navigation

The command palette supports full keyboard navigation:

  • Arrow Up/Down: Navigate through commands
  • Enter: Execute the selected command
  • Escape: Close the palette
  • Typing: Filters commands by title and subtitle
  • Per-item hotkeys: Execute specific commands directly (when palette is open)

Accessibility

The v-command-palette component follows accessibility best practices:

  • Uses semantic ARIA roles (listbox for the list, option for items)
  • Provides descriptive labels for screen readers
  • Implements aria-activedescendant for proper focus announcement
  • Maintains focus within the dialog while open
  • Returns focus to the previously focused element on close
  • Supports full keyboard navigation without mouse interaction