Command

Command palette for keyboard-driven navigation and actions

Example

command

Loading preview…

Command

Command palette for keyboard-driven navigation and actions

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
label	string		-	Accessible label for this command menu. Not shown visibly.
shouldFilter	boolean		-	Optionally set to false to turn off the automatic filtering and sorting. If false, you must conditionally render valid items based on the search query yourself.
filter	CommandFilter		-	Custom filter function for whether each command menu item should matches the given search query. It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely. By default, uses the command-score library.
value	string		-	Optional controlled state of the selected command menu item.
onValueChange	((value: string) => void)		-	Event handler called when the selected item of the menu changes.
loop	boolean		-	Optionally set to true to turn on looping around when using the arrow keys.
disablePointerSelection	boolean		-	Optionally set to true to disable selection via pointer events.
vimBindings	boolean		-	Set to false to disable ctrl+n/j/p/k shortcuts. Defaults to true.

Usage

import { Command } from '@databricks/appkit-ui';

<Command /* props */ />

CommandDialog

Dialog wrapper for the command palette

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

Prop	Type	Required	Default	Description
open	boolean		-	-
defaultOpen	boolean		-	-
onOpenChange	((open: boolean) => void)		-	-
modal	boolean		-	-
title	string		Command Palette	-
description	string		Search for a command to run...	-
className	string		-	-
showCloseButton	boolean		true	-

Usage

import { CommandDialog } from '@databricks/appkit-ui';

<CommandDialog /* props */ />

CommandEmpty

Empty state displayed when no commands match the search

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-

Usage

import { CommandEmpty } from '@databricks/appkit-ui';

<CommandEmpty /* props */ />

CommandGroup

Group of related command items with an optional heading

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
heading	ReactNode		-	Optional heading to render for this group.
value	string		-	If no heading is provided, you must provide a value that is unique for this group.
forceMount	boolean		-	Whether this group is forcibly rendered regardless of filtering.

Usage

import { CommandGroup } from '@databricks/appkit-ui';

<CommandGroup /* props */ />

CommandInput

Search input field for filtering command items

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
value	string		-	Optional controlled state for the value of the search input.
onValueChange	((search: string) => void)		-	Event handler called when the search value changes.

Usage

import { CommandInput } from '@databricks/appkit-ui';

<CommandInput /* props */ />

CommandItem

Individual selectable command item

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
disabled	boolean		-	Whether this item is currently disabled.
onSelect	((value: string) => void)		-	Event handler for when this item is selected, either via click or keyboard selection.
value	string		-	A unique value for this item. If no value is provided, it will be inferred from children or the rendered textContent. If your textContent changes between renders, you must provide a stable, unique value.
keywords	string[]		-	Optional keywords to match against when filtering.
forceMount	boolean		-	Whether this item is forcibly rendered regardless of filtering.

Usage

import { CommandItem } from '@databricks/appkit-ui';

<CommandItem /* props */ />

CommandList

Scrollable list container for command items

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
label	string		-	Accessible label for this List of suggestions. Not shown visibly.

Usage

import { CommandList } from '@databricks/appkit-ui';

<CommandList /* props */ />

CommandSeparator

Visual separator between command groups

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-
alwaysRender	boolean		-	Whether this separator should always be rendered. Useful if you disable automatic filtering.

Usage

import { CommandSeparator } from '@databricks/appkit-ui';

<CommandSeparator /* props */ />

CommandShortcut

Keyboard shortcut indicator displayed next to command items

Source: packages/appkit-ui/src/react/ui/command.tsx

Props

This component extends standard HTML element attributes.

Usage

import { CommandShortcut } from '@databricks/appkit-ui';

<CommandShortcut /* props */ />