Command

Command palette pattern. Composable input + grouped item list with fuzzy search. CommandDialog wraps it in a modal for global ⌘K menus.

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";
</script>

<template>
  <Command>
    <CommandInput />
    <CommandList>
      <CommandEmpty />
      <CommandGroup>
        <CommandItem>
          <CommandShortcut />
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
    </CommandList>
  </Command>
</template>

Default

Inline command palette anchored to its container.

Dialog (⌘K)

Open as a global modal triggered by a keyboard shortcut.

Multiple groups

Several CommandGroups divided by CommandSeparator for clearer sections.

API Reference

Props, events, and slots for each sub-component.

Command

Props

Prop	Type	Default	Description
modelValue	string	—	Selected item value. Supports v-model.
filter	(value, search) => number	fuzzy	Custom match scorer.

Events

Event	Description
update:modelValue	Fires when the highlighted/selected value changes.

CommandDialog

Props

Prop	Type	Default	Description
open	boolean	—	Dialog open state. Supports v-model:open.

Events

Event	Description
update:open	Fires when the dialog opens or closes.

CommandInput

Props

Prop	Type	Default	Description
modelValue	string	—	Search query. Supports v-model.
placeholder	string	—	Placeholder text for the search field.

CommandItem

Props

Prop	Type	Default	Description
value	string	—	Value used for filtering and selection.
disabled	boolean	false	Block selection of this item.

Events

Event	Description
select	Fires when the item is chosen via click or Enter.

CommandGroup / CommandEmpty

Props

Prop	Type	Default	Description
heading	string	—	(CommandGroup) Section heading. CommandEmpty renders when no item matches.

Accessibility

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`A`	Typing in the input filters the item list.
`↑`	Moves the highlight to the previous item.
`↓`	Moves the highlight to the next item.
`Enter`	Selects the highlighted item.
`Esc`	Clears the search, or closes the palette when shown in a dialog.

Follows the combobox/listbox pattern: a textbox input controls a role=listbox of items.
aria-activedescendant tracks the highlighted item while DOM focus stays on the input.

Combobox Context Menu