Command

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

WebBêtaNavigation

Web uniquement — React, depuis @krizaka/ui/command. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by Orazaka, krizaka.com.

Quand l’utiliser

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.

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	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	Défaut	Description
`placeholder`requis	`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	Défaut	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	Défaut	Description
`emptyLabel`requis	`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	Défaut	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`.

Accessibilité

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.

Clavier

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

Bonnes pratiques

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).

Générée depuis le code de @krizaka/ui 3.18.2 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub