SutraUI.Command (Sutra UI v0.3.0)

A command palette component for fast keyboard-driven navigation and actions.

Command palettes provide a searchable, keyboard-navigable list of commands or options. They can be used inline or as a modal dialog.

Examples

# Inline command menu
<.command id="actions" placeholder="Search actions...">
  <.command_group heading="Actions">
    <.command_item id="new-file" phx-click="new_file">New File</.command_item>
    <.command_item id="open-file" phx-click="open_file">Open File</.command_item>
  </.command_group>
  <.command_separator />
  <.command_group heading="Settings">
    <.command_item id="preferences">Preferences</.command_item>
  </.command_group>
</.command>

# Modal command palette (Cmd+K style)
<.command_dialog id="cmd-palette">
  <.command_group heading="Navigation">
    <.command_item id="home" keywords={["index", "main"]}>Home</.command_item>
    <.command_item id="settings" keywords={["preferences", "config"]}>Settings</.command_item>
  </.command_group>
</.command_dialog>

Accessibility

Full keyboard navigation (Arrow keys, Home, End, Enter, Escape)
Search/filter functionality with live updates
Proper ARIA roles and attributes
Focus management

Summary

Functions

command(assigns)

Renders an inline command menu.

command_dialog(assigns)

Renders a modal command dialog (Cmd+K style).

command_group(assigns)

Renders a command group with an optional heading.

command_item(assigns)

Renders a command item.

command_separator(assigns)

Renders a separator between command items or groups.

hide_command_dialog(js \\ %JS{}, id)

Hides a command dialog by ID.

show_command_dialog(js \\ %JS{}, id)

Shows a command dialog by ID.

Functions

command(assigns)

Renders an inline command menu.

Attributes

id (:string) (required) - Unique identifier for the command.
placeholder (:string) - Search input placeholder. Defaults to "Type a command or search...".
empty_text (:string) - Text shown when no results match. Defaults to "No results found.".
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. Additional HTML attributes.

Slots

inner_block (required) - Command items and groups.

command_dialog(assigns)

Renders a modal command dialog (Cmd+K style).

Attributes

id (:string) (required) - Unique identifier for the command dialog.
placeholder (:string) - Search input placeholder. Defaults to "Type a command or search...".
empty_text (:string) - Text shown when no results match. Defaults to "No results found.".
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. Additional HTML attributes.

Slots

inner_block (required) - Command items and groups.

command_group(assigns)

Renders a command group with an optional heading.

Attributes

heading (:string) - Group heading text. Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. Additional HTML attributes.

Slots

inner_block (required) - Command items in this group.

command_item(assigns)

Renders a command item.

Attributes

id (:string) (required) - Unique identifier for the item.
keywords (:list) - Additional search keywords. Defaults to [].
disabled (:boolean) - Whether the item is disabled. Defaults to false.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["phx-click", "phx-value-id"].

Slots

inner_block (required) - The item content.

command_separator(assigns)

Renders a separator between command items or groups.

hide_command_dialog(js \\ %JS{}, id)

Hides a command dialog by ID.

Examples

<button phx-click={PhxUI.Command.hide_command_dialog("cmd-palette")}>Close</button>

show_command_dialog(js \\ %JS{}, id)

Shows a command dialog by ID.

Examples

<button phx-click={PhxUI.Command.show_command_dialog("cmd-palette")}>Open</button>