Command
A command palette for searching and executing actions, similar to Cmd+K interfaces.
Usage
Command Dialog
Use CommandDialog to render the command palette in a modal dialog:
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | '' | The current search value. Use with v-model. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Emitted when the search value changes. |
highlight | { ref: HTMLElement, value: string } | undefined | Emitted when the highlighted element changes. |
Sub-components
CommandDialog
Command palette rendered in a modal dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Command Palette' | Dialog title for accessibility. |
description | string | 'Search for a command to run...' | Dialog description for accessibility. |
CommandInput
Search input with magnifying glass icon.
CommandList
Scrollable list container for items and groups.
CommandGroup
Groups related items under a heading.
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | - | Group heading text. |
CommandItem
Selectable command item.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Value used for filtering and selection. |
disabled | boolean | - | Disable this item. |
CommandEmpty
Shown when no items match the search query.
CommandSeparator
Visual divider between groups.
CommandShortcut
Displays a keyboard shortcut hint aligned to the right.