# Command

Command palette for keyboard-driven navigation and actions

## Example

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

| 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

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

```

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

| 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

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

```

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

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

### Usage

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

```

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

| 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

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

```

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

| 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

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

```

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

| 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

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

```

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

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

### Usage

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

```

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

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

### Usage

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

```

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

This component extends standard HTML element attributes.

### Usage

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

```