# CommandPalette

Searchable command dialog with grouped results.

Use CommandPalette for searchable application commands when the available actions span several groups. Give duplicate titles distinct `id` values; titles remain searchable.

## API

The package declarations define these public members.

| Member | Type | Kind | Required | Default | Description |
| --- | --- | --- | --- | --- | --- |
| `empty` | `Snippet` | snippet | No | `undefined` | Shown when `items` is empty/absent (hint / empty state). |
| `filter` | `boolean \| ((item: CommandPaletteItem, query: string) => boolean)` | callback | No | `true` | Client-side filtering of `items` by `query`. `true` (default) keeps rows whose title / description / meta contain the query (case-insensitive). Pass a predicate for custom matching, or `false` to disable it (when the consumer filters externally, e.g. server-side, and feeds already-filtered `items`). |
| `hotkey` | `string \| false` | prop | No | `'k'` | Letter for the global mod+<letter> shortcut (⌘ on macOS, Ctrl elsewhere). Falsy disables. |
| `items` | `CommandPaletteItem[] \| CommandPaletteGroup[]` | prop | No | `[]` | Result model — flat list or grouped. Each item needs a distinct id; titles remain searchable. |
| `label` | `string` | prop | No | `'Search'` | Accessible label for the dialog and the result listbox. |
| `onSelect` | `(item: CommandPaletteItem) => void` | callback | No | `undefined` | Fired when a row is chosen (Enter on the highlighted row, or click), after the item's own `onSelect`. |
| `onSubmit` | `(query: string) => void` | callback | No | `undefined` | Fired when Enter is pressed with no row highlighted (free-text submit). |
| `open` | `boolean` | binding | No | `false` | Whether the palette is open. Two-way bindable. |
| `placeholder` | `string` | prop | No | `'Search…'` | Placeholder + accessible label for the search field. |
| `query` | `string` | binding | No | `''` | The search query. Two-way bindable. |
| `row` | `Snippet<[CommandPaletteItem, boolean]>` | snippet | No | `undefined` | Optional per-row renderer; receives (item, isActive). Overrides the default row body. |

## Related

- [Modal](/docs/components/modal): Dialog or confirmation modal selected with a required kind and delegated trigger.
- [Sheet](/docs/components/sheet): Edge-anchored dialog panel with optional body padding.
- [Menu](/docs/components/menu): Dropdown action menu with declarative items and eyebrow-styled group headers.