Skip to main content

Back to all patterns

Command Palette

ID: command_palette Category: utility Required slots: input, results

Live example

Overview

Keyboard-invoked navigation palette.

Read more

Keyboard-invoked navigation palette.

Tags: command, palette, utility

When to use / When not to use

When to use

  • This pattern appears frequently in the utility category and has reusable slot anatomy.

When not to use

  • Avoid this pattern when a simpler native element can meet the same user goal with less cognitive load.

Accessibility notes

  • Keyboard keys: Esc, Enter, ArrowDown, ArrowUp.
  • ARIA attributes: .
  • Visible focus required: No.

Implementation 

<x-ui.command-palette
  title="Pattern Demo: Command Palette"
  placeholder="Search commands"
  :commands="['Open member profile', 'Go to events', 'Create governance motion']"
/>