Command

Example

import {
  Calculator,
  Calendar,
  CreditCard,
  Settings,
  Smile,
  User,
} from "lucide-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@databricks/appkit-ui/react"

export default function CommandExample() {
  return (
    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Calendar />
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <Smile />
            <span>Search Emoji</span>
          </CommandItem>
          <CommandItem disabled>
            <Calculator />
            <span>Calculator</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <User />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCard />
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Settings />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Command

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

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

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

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

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

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

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

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

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 */ />