CommandMenu

organisms

Cmd+K command palette — searchable list of actions/navigation. Modal-style, debounced search, ⌘K to open, Esc to close, arrow keys to navigate.

ARIA Role: dialog

Demo

Demo for CommandMenu (organisms)

Cmd+K command palette — searchable list of actions/navigation. Modal-style, debounced search, ⌘K to open, Esc to close, arrow keys to navigate.

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	Yes	`—`
`onOpenChange`	`(open: boolean) => void`	Yes	`—`
`groups`	`CommandGroup[]`	Yes	`—`	1-6 groups

TypeScript Interface

interface CommandMenuProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  groups: { id: string; label: string; items: { id: string; label: string; icon?: React.ReactNode; shortcut?: string; onSelect: () => void }[] }[];
  placeholder?: string;
  emptyMessage?: string;
}

Assertions (NASA Rule 5)

[type]groups bounded 1-6 (NASA Rule 2)(NASA Rule 2)
[aria]role='dialog' aria-modal='true' combobox pattern; ⌘K global hotkey(WAI-ARIA Combobox 1.2 + Dialog)

Usage

Import

import { Commandmenu } from '@epasslive/design-system'

Basic

<Commandmenu />

With Variants

<Commandmenu variant="primary" size="md" />