ObjectUIComponentsForm
Command
Fast command menu with search and keyboard navigation
The Command component provides a fast, searchable command menu with keyboard navigation.
Basic Usage
Command Menu
{
"type": "command",
"placeholder": "Type a command or search...",
"groups": [
{
"heading": "Suggestions",
"items": [
{
"value": "calendar",
"label": "Calendar",
"icon": "calendar"
},
{
"value": "search",
"label": "Search Emoji",
"icon": "smile"
},
{
"value": "calculator",
"label": "Calculator",
"icon": "calculator"
}
]
},
{
"heading": "Settings",
"items": [
{
"value": "profile",
"label": "Profile",
"icon": "user"
},
{
"value": "billing",
"label": "Billing",
"icon": "credit-card"
},
{
"value": "settings",
"label": "Settings",
"icon": "settings"
}
]
}
]
}Schema
interface CommandItem {
value: string;
label: string;
icon?: string;
shortcut?: string[];
}
interface CommandGroup {
heading?: string;
items: CommandItem[];
}
interface CommandSchema {
type: 'command';
placeholder?: string; // Search placeholder
groups: CommandGroup[]; // Command groups
emptyText?: string; // Text when no results
// Events
onSelect?: string | ActionConfig;
// Styling
className?: string;
}Examples
With Shortcuts
Command Palette with Shortcuts
{
"type": "command",
"placeholder": "Search commands...",
"groups": [
{
"heading": "File",
"items": [
{
"value": "new",
"label": "New File",
"icon": "file-plus",
"shortcut": [
"Ctrl",
"N"
]
},
{
"value": "open",
"label": "Open File",
"icon": "folder-open",
"shortcut": [
"Ctrl",
"O"
]
},
{
"value": "save",
"label": "Save",
"icon": "save",
"shortcut": [
"Ctrl",
"S"
]
}
]
}
]
}