Command

A command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.

WebBetaNavigation

Web only — React, from @krizaka/ui/command. Beta: its API may still change in a minor version.

Why it is here. Used by Orazaka, krizaka.com.

When to use

To reach any page or action of an app from the keyboard (⌘K): CommandDialog.
For a searchable list of choices inside a panel: Command.Root inline.
When results come from the server: shouldFilter={false} and Command.Loading.

When not to use

For a short list of actions on one item.Use instead: Dropdown menu
For a choice among a few options in a form: use a select or radios.Use instead: Radio group
As the only way to navigate: keep the visible navigation.

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Command, CommandDialog } from "@krizaka/ui/command";

Examples

Inline

In a card: the input, groups, shortcuts, a disabled item.

Commands

Nothing matches.

No results

emptyLabel on Command.List: said beside the listbox when nothing matches.

Commands

Nothing matches “zzz”.

In a dialog

CommandDialog: the palette of an app, opened from a button or a shortcut.

Props

CommandRoot

The palette: value / onValueChange (the active item), shouldFilter, filter, loop.

Prop	Type	Default	Description
`label`	`string`	—	Accessible label for this command menu. Not shown visibly. The accessible name of the palette — passed translated ("Search", "Commands").

CommandInput

The search field (value / onValueChange for the query), with a magnifier.

Prop	Type	Default	Description
`placeholder`required	`string`	—	What to type — passed translated. The input is named by the palette's `label`.
`trailing`	`ReactNode`	—	After the input, inside the bar: a spinner, a clear button.

CommandList

Prop	Type	Default	Description
`emptyLabel`	`ReactNode`	—	Shown when nothing matches — passed translated. Rendered after the listbox, never inside it: an empty listbox is valid, a listbox holding text is not.
`label`	`string`	—	Accessible label for this List of suggestions. Not shown visibly. The accessible name of the list of results — passed translated ("Suggestions", "Results").

CommandEmpty

Shown by cmdk only when no item matches. Place it beside Command.List (or pass emptyLabel to the list), never inside it: inside, it is rendered as before but warns in development — the listbox then holds text, which axe refuses (aria-required-children).

Prop	Type	Default	Description
`emptyLabel`required	`ReactNode`	—	Shown when nothing matches — passed translated.

CommandDialog

The palette in a dialog (Radix: focus trap, Escape, focus return). The dialog is named by label; it has no close button — Escape and a click outside close it — and the input takes the focus when it opens.

Prop	Type	Default	Description
`contentProps`	`Omit<DialogContentProps & RefAttributes<HTMLDivElement> & DialogVariants & { closeLabel?: string; hideClose: true; } & { ...; }, "children" \| ... 1 more ... \| "hideClose">`	—	Passed to `Dialog.Content`: `size`, `container`, `className` of the dialog.
`defaultOpen`	`boolean`	—	Open at first, uncontrolled.
`footer`	`ReactNode`	—	Under the palette, inside the dialog: shortcuts, a "see all results" link.
`label`	`string`	—	Accessible label for this command menu. Not shown visibly. The accessible name of the palette — passed translated ("Search", "Commands").
`onOpenChange`	`((open: boolean) => void)`	—	Called when it opens or closes (Escape, a click outside, a shortcut of the product).
`open`	`boolean`	—	Open or closed (controlled), with `onOpenChange`.

Accessibility

A combobox and a listbox: the input owns aria-activedescendant, the results are options.
label names the palette, Command.List label the results.
CommandDialog traps the focus in the platform's Dialog and puts it in the input when it opens.

Keyboard

Keys	Action
`Arrow keys`	Move through the results.
`Enter`	Runs the highlighted command.
`Esc`	Closes the `CommandDialog` and returns the focus.

Best practices

Group the commands (Command.Group heading) and show their shortcuts with Command.Shortcut.
Add keywords so a command is found by the words people type, not only by its label.
Always say what an empty search means with emptyLabel on Command.List (said beside the listbox, never inside it).

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub