Command Palette
The Command Palette is a centered overlay with a search input, a scrollable body for results or commands, optional footer hints, and a trigger element that opens the dialog. Press ⌘K (macOS) or Ctrl+K (Windows/Linux) to toggle the palette when the page is focused.
Loading Code Block...Default example
Section titled “Default example”Loading Code Block...Footer hints
Section titled “Footer hints”Set showFooter to show keyboard hint copy (navigate with arrows, confirm with Enter) at the bottom of the modal.
Loading Code Block...Search value (controlled)
Section titled “Search value (controlled)”Loading Code Block...Empty and custom content
Section titled “Empty and custom content”The body
Loading Code Block...Keyboard and focus
Section titled “Keyboard and focus”- ⌘K / Ctrl+K toggles open and closed (when the window receives the key event).
- Escape closes the palette.
Tip: focus this page, then press ⌘K (or Ctrl+K) to toggle.
Loading Code Block...Accessibility
Section titled “Accessibility”- Provide a
triggerthat is a realbuttonor focusable control when possible; read-only inputs are used in marketing patterns but are weaker for keyboard-only users opening the surface. - Keep result rows as semantic
buttonelements or links with clear labels when items are selectable. - The overlay should trap focus inside the dialog for full WCAG compliance—the built-in implementations focus on layout and search; verify focus trap if you have strict compliance targets.
Best practices
Section titled “Best practices”Props and slots
Section titled “Props and slots”| Slot | Default | Type | Description |
|---|---|---|---|
| #trigger | - | - | Required. Element that opens the palette on click. |
| #slot | - | - | Required. Main scrollable content under the search header. |
Emits: onChange (payload: latest query string). Also fires the onChange callback prop on the same keystroke when one is supplied.