Renders a command palette: a dialog with a search box and grouped, keyboard-navigable items. Opened with the keyboard shortcut (⌘K / Ctrl+K by default), or with SlopUI.JS.open_dialog("#id").

<.command id="cmd" placeholder="Search commands…">
  <:group label="Navigate">
    <.command_item navigate={~p"/projects"} shortcut="G P"><.icon name="folder" /> Projects</.command_item>
  </:group>
  <:group label="Actions">
    <.command_item phx-click="new-project" hint="Creates a blank project"><.icon name="plus" /> New project</.command_item>
  </:group>
</.command>

Items filter as you type. For server-side search pass on_search (an event name); the hook pushes %{"query" => text} and you re-render the items. Enter activates the highlighted item and the palette closes.

Attributes

• id (:string) (required)
• placeholder (:string) - defaults to "Type a command or search…". Defaults to nil.
• shortcut (:string) - key combined with ⌘ / Ctrl that opens the palette; nil disables. Defaults to "k".
• on_search (:string) - Defaults to nil.
• loading (:boolean) - Defaults to false.
• empty (:string) - defaults to "No results". Defaults to nil.
• footer (:boolean) - show the keyboard hints footer. Defaults to true.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-target"].

Slots

• group (required) - Accepts attributes:
  • label (:string) (required)

An item inside a command palette group. Renders a link when navigate, patch or href is set.

Attributes

• hint (:string) - Defaults to nil.
• shortcut (:string) - space-separated keys, e.g. "⌘ N". Defaults to nil.
• keywords (:string) - extra words that match when filtering. Defaults to nil.
• disabled (:boolean) - Defaults to false.
• href (:any) - Defaults to nil.
• navigate (:string) - Defaults to nil.
• patch (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)