Command

The inline command palette: a search field filtering a keyboard-navigable list, built on Base UI Autocomplete in inline mode. The list is always open; typing filters the entries and the first match is highlighted, so Enter activates it. Import from "@instruments/materia-ui/components/command".

Usage

import { Command, commandAnatomy, CommandCollection, CommandDialog, CommandDialogProps, CommandEmpty, CommandGroup, CommandGroupData, CommandInput, CommandItem, CommandList, CommandProps, CommandSeparator, CommandShortcut, CommandSource } from "@instruments/materia-ui/components/command";

Best practices

For a ⌘K overlay use CommandDialog - Command alone is the inline, non-floating palette container.
Pass the entries as items, or as titled groups, and render them with a function child of CommandList; filtering only sees those entries, so items written as static JSX are not filtered.
Act on a choice with CommandItem's onClick, which fires for a pointer click and for Enter on the highlighted item.
A plain click-triggered action menu is DropdownMenu; a remembered selection is Combobox.

Props

Command

Prop	Type	Description
items	`readonly Item[]`	The entries the palette lists and filters.
groups	`readonly CommandGroupData<Item>[]`	Titled groups of entries; `CommandList`'s function child receives each group.
children	`React.ReactNode`	Palette parts: `CommandInput`, `CommandEmpty` and `CommandList`.
className	`string`	Extra classes for the palette container.

CommandDialog

Prop	Type	Description
items	`readonly Item[]`	The entries the palette lists and filters.
groups	`readonly CommandGroupData<Item>[]`	Titled groups of entries; `CommandList`'s function child receives each group.
children	`React.ReactNode`	Palette content, typically `CommandInput`, `CommandEmpty` and `CommandList`.
title	`string`	Accessible title for the dialog (visually hidden by default).
description	`string`	Accessible description for the dialog (visually hidden by default).
className	`string`	Extra class names applied to the `DialogContent` wrapper.
showCloseButton	`boolean`	Whether to show the dialog close button.
contentProps	`Omit<Omit<Omit<import("@base-ui/react").AlertDialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "className"> & { className?: string; } & import("../dialog/dialog-content").DialogContentEx`	Extra props applied to the rendered dialog content element.

CommandEmpty

Prop	Type	Default	Description
className	`string`

CommandGroup

Prop	Type	Default	Description
className	`string`
heading	`React.ReactNode`		Heading shown above the group's items; omit for an unlabelled group.

CommandInput

Prop	Type	Default	Description
className	`string`

CommandItem

Prop	Type	Default	Description
className	`string`

CommandList

Prop	Type	Default	Description
className	`string`

CommandSeparator

Prop	Type	Default	Description
className	`string`

Also exports

constcommandAnatomy
componentCommandCollection
typeCommandDialogProps
interfaceCommandGroupData
typeCommandProps
componentCommandShortcut
typeCommandSource

Anatomy

Command

command

Command palette / search interface

CommandInput

command-input

Search input field

CommandList

command-list

Results container

CommandEmpty

command-empty

No results message

CommandGroup

command-group

Grouped items with heading

CommandGroup heading

command-group-heading

Group heading

CommandItem

command-item

Selectable command item

CommandSeparator

command-separator

Visual divider

CommandShortcut

command-shortcut

Keyboard shortcut hint

Composition

Builds on

Dialog, Flex, Icon