Actions & Navigation
Command
A command palette for searching and running actions with keyboard navigation.
Dialog#
Use CommandDialog to display the command palette in a modal overlay. Control visibility
with the isOpen and onOpenChange props.
Component props#
Command#
| Name | Type | Description |
|---|---|---|
| value | string | Controlled value of the selected item |
| onValueChange | (value: string) => void | Called when the selected item changes |
| filter | (value, search, keywords) => number | Custom filter function for ranking items |
| shouldFilter | boolean | Disable built-in filtering when false |
| loop | boolean | Loop keyboard navigation from last item to first |
CommandInput#
| Name | Type | Description |
|---|---|---|
| placeholder | string | Input placeholder text |
| value | string | Controlled search value |
| onValueChange | (search: string) => void | Called when the search value changes |
CommandGroup#
| Name | Type | Description |
|---|---|---|
| heading | ReactNode | Group heading displayed above items |
CommandItem#
| Name | Type | Description |
|---|---|---|
| icon | ReactNode | Icon displayed before the label |
| isDisabled | boolean | Disables the item |
| value | string | Value used for filtering (defaults to text content) |
| keywords | string[] | Additional keywords used when filtering |
| onSelect | (value: string) => void | Called when the item is selected |
CommandDialog#
| Name | Type | Description |
|---|---|---|
| isOpen | boolean | Whether the dialog is open |
| onOpenChange | (open: boolean) => void | Called when the open state changes |