Command
The Command component, built using CMDK, provides a fast and flexible interface for executing commands or navigating options. It allows users to quickly find and select actions, improving workflow efficiency and user interaction. This component is ideal for applications that require rapid access to commands, such as search-driven interfaces, command palettes, or action menus.
Additional Examples
With <Dialog>
To display the command menu in a dialog, use the <CommandDialog /> component. You can also configure keyboard shortcuts to open and interact with the command menu, enhancing accessibility and user efficiency.
Press ⌘J
As Combobox
You can use the <Command /> component as a combobox. For more details, visit the Combobox page.
Configurable Props
<Command>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<Command> | Component | False | Acts as the wrapper for the command component. |
<CommandDialog>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<CommandDialog> | Component | False | Acts as the wrapper for the command dialog. |
open | state variable | undefined | Controls the open state of the dialog. |
onOpenChange | function | Callback function when the open state changes. |
<CommandInput>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
placeholder | String | True | Placeholder text for the input field. |
<CommandList>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<CommandList> | Component | False | Container for command items. |
<CommandEmpty>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<CommandEmpty> | Component | String | String displayed when no results are found. |
<CommandGroup>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
heading | string | True | Heading text for the group. |
<CommandItem>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<CommandItem> | Component | False | Individual item in the command list. |
<CommandShortcut>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<CommandShortcut> | Component | False | Displays keyboard shortcut for command items. |
<CommandSeparator>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<CommandSeparator> | Component | False | Separator between command groups or items. |