Command Palette

The Command Palette component allows users to quickly find and execute commands via keyboard navigation or search, with optional async search support.

Usage & Examples

Default

default.tsx
<CommandPalette 
    open={isOpen}
    onClose={() => setIsOpen(false)}
    commands={[
      { label: "Open Dashboard", action: () => alert("Dashboard opened") },
      { label: "View Settings", action: () => alert("Settings opened") },
      { label: "Log Out", action: () => alert("Logged out") },
    ]}
  />

Props API

27 props
Columns
Command Palette props API
Default
Description
asyncSearch((query: string) => Promise<CommandItem[]>)Noevents—Callback to handle the search input asynchronously.
classNamestringNostyling—Custom classname for the command palette.
commandsCommandItem[]Yesprops—Array of available command options.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
debounceMsnumberNoprops300Optional debounce time (in ms) for the search input.
emptyMessagestringNoprops"No matching results"Message announced when there are no matching commands.
inputAriaDescribedBystringNoprops—Accessible description reference for the search input.
inputAriaLabelstringNoprops—Accessible label for the search input.
inputAriaLabelledBystringNoprops—Accessible label reference for the search input.
inputIdstringNoprops—Optional ID for the input element.
inputLabelstringNoprops—Optional visible or screen-reader-only label for the input.
listAriaLabelstringNoprops"Command suggestions"Accessible label for the command results list.