Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Command

Command palette for keyboard-driven navigation and actions

## 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​

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