Command Palette

Examples

Basic (Static Results)

<rhx-button rhx-variant="neutral" rhx-appearance="outlined"
            onclick="document.getElementById('basic-cp').removeAttribute('hidden');
                     document.getElementById('basic-cp').querySelector('input').focus();">
    Open Palette
</rhx-button>

<rhx-command-palette id="basic-cp" rhx-label="Quick search">
    <rhx-command-group rhx-heading="Pages">
        <rhx-command-item rhx-value="home" rhx-href="/" rhx-icon="home">
            Home
        </rhx-command-item>
        <rhx-command-item rhx-value="getting-started" rhx-href="/Docs/GettingStarted" rhx-icon="file">
            Getting Started
        </rhx-command-item>
    </rhx-command-group>
    <rhx-command-group rhx-heading="Components">
        <rhx-command-item rhx-value="button" rhx-href="/Docs/Components/Button" rhx-icon="cursor">
            Button
        </rhx-command-item>
        <rhx-command-item rhx-value="dialog" rhx-href="/Docs/Components/Dialog" rhx-icon="layers">
            Dialog
        </rhx-command-item>
    </rhx-command-group>
</rhx-command-palette>

Item Variations (Icons, Descriptions, Shortcuts, Disabled)

<rhx-command-item rhx-value="settings"
    rhx-href="/settings"
    rhx-icon="settings"
    rhx-description="Manage your preferences"
    rhx-shortcut="⌘,">
    Settings
</rhx-command-item>

<rhx-command-item rhx-value="locked" rhx-disabled="true">
    Locked Feature
</rhx-command-item>

htmx Integration (Server Search)

Press ⌘K / Ctrl+K to open, or click the button below.

<!-- Press Cmd+K / Ctrl+K to open -->
<rhx-command-palette id="htmx-cp"
    rhx-placeholder="Search components..."
    hx-get="/Docs/Components/CommandPalette?handler=Search"
    rhx-debounce="200"
    rhx-label="Search components">
</rhx-command-palette>

<!-- Server handler returns grouped results: -->
public IActionResult OnGetSearch(string q) { ... }

Properties

Property	Type	Default	Description
`rhx-placeholder`	`string`	`"Search..."`	Input placeholder text
`rhx-shortcut`	`string`	`"mod+k"`	Keyboard shortcut to open (mod = Cmd on Mac, Ctrl on Win/Linux)
`rhx-debounce`	`int`	`300`	Debounce delay in milliseconds
`rhx-min-chars`	`int`	`1`	Minimum characters before search fires
`rhx-empty-message`	`string`	`"No results found"`	Message when results are empty
`rhx-label`	`string`	`"Command palette"`	Accessible label for the dialog

Group Properties

Properties for <rhx-command-group> elements.

Properties

Property	Type	Default	Description
`rhx-heading`	`string`	`-`	Group heading text

Item Properties

Properties for <rhx-command-item> elements.

Properties

Property	Type	Default	Description
`rhx-value`	`string`	`-`	Item value passed on selection
`rhx-href`	`string?`	`-`	Navigation URL on select
`rhx-icon`	`string?`	`-`	Leading icon name
`rhx-description`	`string?`	`-`	Secondary description text
`rhx-shortcut`	`string?`	`-`	Display keyboard shortcut hint
`rhx-disabled`	`bool`	`false`	Disabled state

Examples

Basic (Static Results)

Item Variations (Icons, Descriptions, Shortcuts, Disabled)

htmx Integration (Server Search)

Properties

Group Properties

Properties

Item Properties

Properties

Accessibility