Command
Demo
New
Open⌘O
Save⌘S
Save As⌘+Shift+S
Undo⌘Z
Redo⌘Y
Press ⌘K
Props
| Prop | Type | Description |
|---|---|---|
input | boolean (optional) | Determines if an input field is displayed. |
inputPlaceholder | string (optional) | Placeholder text for the input field. |
emptyPlaceholder | string (optional) | Placeholder text to display when there are no command items. |
commandGroups | CommandGroup[] (optional) | An array of command groups, each with items and a heading. |
classNames | { [key: string]: string } (optional) | Custom class names for various Command components. |
CommandGroup Type
| Prop | Type | Description |
|---|---|---|
heading | string (optional) | The heading text for the command group. |
isSeparator | boolean (optional) | If true, renders a separator instead of command items. |
items | Array (optional) | An array of command items within the group. |
CommandItem Type within CommandGroup
| Prop | Type | Description |
|---|---|---|
text | string | The text displayed for the command item. |
icon | React.ReactNode (optional) | An icon displayed next to the command item text. |
href | string (optional) | URL to navigate to when the command item is selected. |
shortcut | string (optional) | A keyboard shortcut associated with the command item. |
disabled | boolean (optional) | If true, the command item is disabled. |
onSelect | (value: string) => void (optional) | Function called when the command item is selected. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall Command component.input: CSS class for styling the input field.empty: CSS class for styling the empty state display.list: CSS class for styling the list of command groups.group: CSS class for styling each command group.item: CSS class for styling individual command items.separator: CSS class for styling separators between groups.shortcut: CSS class for styling keyboard shortcuts displayed on command items.