{"name":"command","title":"Command","description":"Fast, composable, unstyled command menu for searching and running actions.","installCommand":"bunx marko-ui add command -y","usageTags":"<Command>","importSnippet":"import Command from \"@/components/ui/command/command.marko\";","usageSnippet":"static const groups = [\n  {\n    label: \"Suggestions\",\n    items: [\n      { value: \"calendar\", label: \"Calendar\" },\n      { value: \"settings\", label: \"Settings\", shortcut: \"⌘S\" },\n    ],\n  },\n];\n\n<Command groups=groups placeholder=\"Type a command or search...\"/>","tags":["Command"],"parts":[],"props":[{"name":"groups","type":"CommandGroup[]","required":true},{"name":"allowCustomValue","type":"boolean | undefined","required":false,"description":"Whether to allow typing custom values in the input"},{"name":"alwaysSubmitOnEnter","type":"boolean | undefined","required":false,"default":"false","description":"Whether to always submit on Enter key press, even if popup is open.\nUseful for single-field autocomplete forms where Enter should submit the form."},{"name":"autoFocus","type":"boolean | undefined","required":false,"description":"Whether to autofocus the input on mount"},{"name":"closeOnSelect","type":"boolean | undefined","required":false,"description":"Whether to close the combobox when an item is selected."},{"name":"composite","type":"boolean | undefined","required":false,"default":"true","description":"Whether the combobox is a composed with other composite widgets like tabs"},{"name":"defaultHighlightedValue","type":"string | null | undefined","required":false,"description":"The initial highlighted value of the combobox when rendered.\nUse when you don't need to control the highlighted value of the combobox."},{"name":"defaultInputValue","type":"string | undefined","required":false,"default":"","description":"The initial value of the combobox's input when rendered.\nUse when you don't need to control the value of the combobox's input."},{"name":"defaultOpen","type":"boolean | undefined","required":false,"description":"The initial open state of the combobox when rendered.\nUse when you don't need to control the open state of the combobox."},{"name":"defaultValue","type":"string[] | undefined","required":false,"default":"[]","description":"The initial value of the combobox's selected items when rendered.\nUse when you don't need to control the value of the combobox's selected items."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the combobox is disabled"},{"name":"disableLayer","type":"boolean | undefined","required":false,"description":"Whether to disable registering this a dismissable layer"},{"name":"form","type":"string | undefined","required":false,"description":"The associate form of the combobox."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"highlightedValue","type":"string | null | undefined","required":false,"description":"The controlled highlighted value of the combobox"},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the combobox. Useful for composition."},{"name":"inputBehavior","type":"'none' | 'autocomplete' | 'autohighlight' | undefined","required":false,"fixed":"autohighlight","description":"Defines the auto-completion behavior of the combobox.\n\n- `autohighlight`: The first focused item is highlighted as the user types\n- `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated"},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the combobox is invalid"},{"name":"loopFocus","type":"boolean | undefined","required":false,"default":"true","description":"Whether to loop the keyboard navigation through the items"},{"name":"multiple","type":"boolean | undefined","required":false,"description":"Whether to allow multiple selection.\n\n**Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`.\nIt is recommended to render the selected items in a separate container."},{"name":"name","type":"string | undefined","required":false,"description":"The `name` attribute of the combobox's input. Useful for form submission"},{"name":"navigate","type":"((details: NavigateDetails) => void) | null | undefined","required":false,"description":"Function to navigate to the selected item"},{"name":"open","type":"boolean | undefined","required":false,"fixed":"true","description":"The controlled open state of the combobox"},{"name":"openOnChange","type":"boolean | ((details: InputValueChangeDetails) => boolean) | undefined","required":false,"default":"true","description":"Whether to show the combobox when the input value changes"},{"name":"openOnClick","type":"boolean | undefined","required":false,"default":"false","description":"Whether to open the combobox popup on initial click on the input"},{"name":"openOnKeyPress","type":"boolean | undefined","required":false,"default":"true","description":"Whether to open the combobox on arrow key press"},{"name":"placeholder","type":"string | undefined","required":false,"description":"The placeholder text of the combobox's input"},{"name":"positioning","type":"PositioningOptions | undefined","required":false,"description":"The positioning options to dynamically position the menu"},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the combobox is readonly. This puts the combobox in a \"non-editable\" mode\nbut the user can still interact with it"},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the combobox is required"},{"name":"scrollToIndexFn","type":"((details: ScrollToIndexDetails) => void) | undefined","required":false,"description":"Function to scroll to a specific index"},{"name":"selectionBehavior","type":"'clear' | 'replace' | 'preserve' | undefined","required":false,"fixed":"clear","description":"The behavior of the combobox input when an item is selected\n\n- `replace`: The selected item string is set as the input value\n- `clear`: The input value is cleared\n- `preserve`: The input value is preserved"},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"}],"events":[{"name":"onFocusOutside","arg":"FocusOutsideEvent","description":"Function called when the focus is moved outside the component"},{"name":"onHighlightChange","arg":"HighlightChangeDetails<T>","description":"Function called when an item is highlighted using the pointer\nor keyboard navigation."},{"name":"onInputValueChange","arg":"InputValueChangeDetails","description":"Function called when the input's value changes"},{"name":"onInteractOutside","arg":"InteractOutsideEvent","description":"Function called when an interaction happens outside the component"},{"name":"onOpenChange","arg":"OpenChangeDetails","description":"Function called when the popup is opened"},{"name":"onPointerDownOutside","arg":"PointerDownOutsideEvent","description":"Function called when the pointer is pressed down outside the component"},{"name":"onSelect","arg":"SelectionDetails","description":"Function called when an item is selected"},{"name":"onValueChange","arg":"ValueChangeDetails<T>","description":"Function called when a new item is selected"},{"name":"valueChange","arg":"string"}],"keyboard":[{"keys":"↓ / ↑","description":"Move the highlighted item to the next/previous item, wrapping at the ends."},{"keys":"Enter","description":"Select the highlighted item."},{"keys":"Escape","description":"Clear the search query, or close the containing dialog when composed inside one."}],"accessibilityNotes":["Built on `@zag-js/combobox`: the search input owns `role=\"combobox\"` with `aria-expanded`/`aria-controls`, and the list is `role=\"listbox\"` with items as `role=\"option\"`.","The currently highlighted item is announced via `aria-activedescendant` on the input, so screen reader users always know which item arrow-key navigation lands on.","Group headings are associated with their items via `aria-labelledby`, not just visual proximity."],"examples":[{"id":"command-demo","title":"Basic","source":"import Command from \"@marko-ui/shadcn/ui/command/command.marko\";\n\nstatic const groups = [\n  {\n    label: \"Suggestions\",\n    items: [\n      { value: \"calendar\", label: \"Calendar\" },\n      { value: \"search-emoji\", label: \"Search Emoji\" },\n      { value: \"calculator\", label: \"Calculator\" },\n    ],\n  },\n  {\n    label: \"Settings\",\n    items: [\n      { value: \"profile\", label: \"Profile\", shortcut: \"⌘P\" },\n      { value: \"billing\", label: \"Billing\", shortcut: \"⌘B\" },\n      { value: \"settings\", label: \"Settings\", shortcut: \"⌘S\" },\n    ],\n  },\n];\n\n<div class=\"w-full max-w-[450px]\">\n  <Command groups=groups placeholder=\"Type a command or search...\" class=\"rounded-lg border shadow-md\"/>\n</div>","description":"Pass `groups` — an array of `{ label, items }` — to render a searchable list. Each item can carry an optional `shortcut`."},{"id":"command-basic","title":"Command Dialog","source":"import Dialog from \"@marko-ui/shadcn/ui/dialog/dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Command from \"@marko-ui/shadcn/ui/command/command.marko\";\n\nstatic const groups = [\n  {\n    label: \"Suggestions\",\n    items: [\n      { value: \"calendar\", label: \"Calendar\" },\n      { value: \"search-emoji\", label: \"Search Emoji\" },\n      { value: \"calculator\", label: \"Calculator\" },\n    ],\n  },\n];\n\n<div class=\"flex flex-col gap-4\">\n  <Dialog class=\"mu-command-dialog top-1/3 translate-y-0 overflow-hidden p-0\" showCloseButton=false>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\" class=\"w-fit\">Open Menu</Button>\n    </@trigger>\n    <@title class=\"sr-only\">Command Palette</@title>\n    <@description class=\"sr-only\">Search for a command to run...</@description>\n    <Command groups=groups placeholder=\"Type a command or search...\"/>\n  </Dialog>\n</div>","description":"A command menu opened from a button trigger, composed from `Dialog` and `Command` (see Composition above).","essential":true},{"id":"command-shortcuts","title":"Shortcuts","source":"import Dialog from \"@marko-ui/shadcn/ui/dialog/dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Command from \"@marko-ui/shadcn/ui/command/command.marko\";\n\nstatic const groups = [\n  {\n    label: \"Settings\",\n    items: [\n      { value: \"profile\", label: \"Profile\", shortcut: \"⌘P\" },\n      { value: \"billing\", label: \"Billing\", shortcut: \"⌘B\" },\n      { value: \"settings\", label: \"Settings\", shortcut: \"⌘S\" },\n    ],\n  },\n];\n\n<div class=\"flex flex-col gap-4\">\n  <Dialog class=\"mu-command-dialog top-1/3 translate-y-0 overflow-hidden p-0\" showCloseButton=false>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\" class=\"w-fit\">Open Menu</Button>\n    </@trigger>\n    <@title class=\"sr-only\">Command Palette</@title>\n    <@description class=\"sr-only\">Search for a command to run...</@description>\n    <Command groups=groups placeholder=\"Type a command or search...\"/>\n  </Dialog>\n</div>","description":"Items with a `shortcut` render it right-aligned. Upstream also shows a leading icon per item; our `CommandItem` type carries only `value`/`label`/`shortcut` and has no icon slot, so this demo omits them rather than faking them."},{"id":"command-groups","title":"Groups","source":"import Dialog from \"@marko-ui/shadcn/ui/dialog/dialog.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Command from \"@marko-ui/shadcn/ui/command/command.marko\";\n\nstatic const groups = [\n  {\n    label: \"Suggestions\",\n    items: [\n      { value: \"calendar\", label: \"Calendar\" },\n      { value: \"search-emoji\", label: \"Search Emoji\" },\n      { value: \"calculator\", label: \"Calculator\" },\n    ],\n  },\n  {\n    label: \"Settings\",\n    items: [\n      { value: \"profile\", label: \"Profile\", shortcut: \"⌘P\" },\n      { value: \"billing\", label: \"Billing\", shortcut: \"⌘B\" },\n      { value: \"settings\", label: \"Settings\", shortcut: \"⌘S\" },\n    ],\n  },\n];\n\n<div class=\"flex flex-col gap-4\">\n  <Dialog class=\"mu-command-dialog top-1/3 translate-y-0 overflow-hidden p-0\" showCloseButton=false>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\" class=\"w-fit\">Open Menu</Button>\n    </@trigger>\n    <@title class=\"sr-only\">Command Palette</@title>\n    <@description class=\"sr-only\">Search for a command to run...</@description>\n    <Command groups=groups placeholder=\"Type a command or search...\"/>\n  </Dialog>\n</div>","description":"Multiple groups are separated automatically by a `CommandSeparator`. Upstream also shows a leading icon per item; omitted here for the same reason as Shortcuts."},{"id":"command-scrollable","title":"Scrollable","source":"import Command from \"@marko-ui/shadcn/ui/command/command.marko\";\n\nstatic const groups = [\n  {\n    label: \"Team\",\n    items: [\n      { value: \"alice\", label: \"Alice Chen\" },\n      { value: \"bilal\", label: \"Bilal Ahmed\" },\n      { value: \"carmen\", label: \"Carmen Diaz\" },\n      { value: \"diego\", label: \"Diego Fernandez\" },\n      { value: \"elena\", label: \"Elena Ivanova\" },\n      { value: \"farid\", label: \"Farid Haidari\" },\n      { value: \"grace\", label: \"Grace Kim\" },\n      { value: \"hassan\", label: \"Hassan Malik\" },\n      { value: \"irene\", label: \"Irene Novak\" },\n      { value: \"james\", label: \"James O'Connor\" },\n      { value: \"keiko\", label: \"Keiko Tanaka\" },\n      { value: \"liam\", label: \"Liam Murphy\" },\n    ],\n  },\n];\n\n<div class=\"w-full max-w-[450px]\">\n  <Command groups=groups placeholder=\"Search team members...\" class=\"rounded-lg border shadow-md\"/>\n</div>","description":"The item list scrolls once its content exceeds the fixed max height, so long groups stay usable."},{"id":"command-empty","title":"Empty state","source":"import Command from \"@marko-ui/shadcn/ui/command/command.marko\";\n\nstatic const groups = [\n  {\n    label: \"Fruits\",\n    items: [\n      { value: \"apple\", label: \"Apple\" },\n      { value: \"banana\", label: \"Banana\" },\n      { value: \"orange\", label: \"Orange\" },\n    ],\n  },\n];\n\n<div class=\"w-full max-w-[450px]\">\n  <Command groups=groups placeholder=\"Try searching for “xyz”...\" class=\"rounded-lg border shadow-md\"/>\n</div>","description":"When a search query matches nothing, the component falls back to a \"No results found.\" message."},{"id":"command-controlled","title":"Controlled","source":"import Command from \"@marko-ui/shadcn/ui/command/command.marko\";\n\nstatic const groups = [\n  {\n    label: \"Suggestions\",\n    items: [\n      { value: \"calendar\", label: \"Calendar\" },\n      { value: \"search-emoji\", label: \"Search Emoji\" },\n      { value: \"calculator\", label: \"Calculator\" },\n    ],\n  },\n  {\n    label: \"Settings\",\n    items: [\n      { value: \"profile\", label: \"Profile\", shortcut: \"⌘P\" },\n      { value: \"billing\", label: \"Billing\", shortcut: \"⌘B\" },\n      { value: \"settings\", label: \"Settings\", shortcut: \"⌘S\" },\n    ],\n  },\n];\n\n<let/selected=null as string | null/>\n\n<div class=\"flex w-full max-w-[450px] flex-col gap-2\">\n  <Command\n    groups=groups\n    placeholder=\"Type a command or search...\"\n    class=\"rounded-lg border shadow-md\"\n    valueChange=(value) => { selected = value; }\n  />\n  <span class=\"text-sm text-muted-foreground\">selected: ${selected ?? \"none\"}</span>\n</div>","description":"Pass `valueChange` to observe the selected item's value as the user navigates and picks from the list.","essential":true},{"id":"command-rtl","title":"RTL","source":"import Command from \"@marko-ui/shadcn/ui/command/command.marko\";\n\nstatic const groups = [\n  {\n    label: \"اقتراحات\",\n    items: [\n      { value: \"calendar\", label: \"التقويم\" },\n      { value: \"search-emoji\", label: \"البحث عن الرموز التعبيرية\" },\n      { value: \"calculator\", label: \"الآلة الحاسبة\" },\n    ],\n  },\n  {\n    label: \"الإعدادات\",\n    items: [\n      { value: \"profile\", label: \"الملف الشخصي\", shortcut: \"⌘P\" },\n      { value: \"billing\", label: \"الفوترة\", shortcut: \"⌘B\" },\n      { value: \"settings\", label: \"الإعدادات\", shortcut: \"⌘S\" },\n    ],\n  },\n];\n\n<div class=\"w-full max-w-[450px]\">\n  <Command\n    groups=groups\n    placeholder=\"اكتب أمرًا أو ابحث...\"\n    dir=\"rtl\"\n    class=\"rounded-lg border shadow-md\"\n  />\n</div>","description":"Pass `dir=\"rtl\"` — it forwards straight through to the root element and search input, no extra wiring required."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div","itemTypes":[{"prop":"groups","typeName":"CommandGroup","fields":[{"name":"label","type":"string","required":true},{"name":"items","type":"CommandItem[]","required":true}]},{"prop":"CommandGroup.items","typeName":"CommandItem","fields":[{"name":"value","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"shortcut","type":"string","required":false}]}],"composition":"`Command` is a single self-contained component — pass it a `groups` array of `{ label, items[] }`, where each item is `{ value, label, shortcut? }`. It renders its own search input, item list, empty state, and group separators internally; there are no separate `CommandInput`/`CommandList`/`CommandGroup`/`CommandItem` parts to compose. For a command palette opened from a trigger (upstream's `CommandDialog`), compose `Dialog` and `Command` yourself:\n\n```marko\n<Dialog class=\"mu-command-dialog top-1/3 translate-y-0 overflow-hidden p-0\" showCloseButton=false>\n  <@trigger|props|><Button ...props>Open</Button></@trigger>\n  <@title class=\"sr-only\">Command Palette</@title>\n  <@description class=\"sr-only\">Search for a command to run...</@description>\n  <Command groups=groups placeholder=\"Type a command or search...\"/>\n</Dialog>\n```"}