# Command

Command palette for keyboard-driven navigation and actions

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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-1 "Direct link to Command")

Command palette for keyboard-driven navigation and actions

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props "Direct link to 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[​](#usage "Direct link to Usage")

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

<Command /* props */ />

```

## CommandDialog[​](#commanddialog "Direct link to CommandDialog")

Dialog wrapper for the command palette

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props-1 "Direct link to 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[​](#usage-1 "Direct link to Usage")

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

<CommandDialog /* props */ />

```

## CommandEmpty[​](#commandempty "Direct link to CommandEmpty")

Empty state displayed when no commands match the search

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-2 "Direct link to Usage")

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

<CommandEmpty /* props */ />

```

## CommandGroup[​](#commandgroup "Direct link to CommandGroup")

Group of related command items with an optional heading

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props-3 "Direct link to 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[​](#usage-3 "Direct link to Usage")

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

<CommandGroup /* props */ />

```

## CommandInput[​](#commandinput "Direct link to CommandInput")

Search input field for filtering command items

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props-4 "Direct link to 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[​](#usage-4 "Direct link to Usage")

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

<CommandInput /* props */ />

```

## CommandItem[​](#commanditem "Direct link to CommandItem")

Individual selectable command item

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props-5 "Direct link to 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[​](#usage-5 "Direct link to Usage")

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

<CommandItem /* props */ />

```

## CommandList[​](#commandlist "Direct link to CommandList")

Scrollable list container for command items

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props-6 "Direct link to Props")

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

### Usage[​](#usage-6 "Direct link to Usage")

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

<CommandList /* props */ />

```

## CommandSeparator[​](#commandseparator "Direct link to CommandSeparator")

Visual separator between command groups

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props-7 "Direct link to Props")

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

### Usage[​](#usage-7 "Direct link to Usage")

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

<CommandSeparator /* props */ />

```

## CommandShortcut[​](#commandshortcut "Direct link to CommandShortcut")

Keyboard shortcut indicator displayed next to command items

**Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx)

### Props[​](#props-8 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-8 "Direct link to Usage")

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

<CommandShortcut /* props */ />

```