Actions & Overlays

Command Palette

A filterable list of commands with keyboard navigation.

stableEnhancer: enhanceCommandBuilt on <input> + listboxhydrateless/command-palette.css

A filterable list of commands with keyboard navigation, group hiding, and an empty state. Render it inline, or drop it inside a <dialog> and open it with a hotkey. Without JavaScript the full list simply renders; the root is marked data-hl-ready once filtering is live. The filter query is the component's value.

Command palette

Type to filter, navigate with Up/Down (and PageUp/PageDown in steps of ten), and run with Enter. Esc clears a non-empty query first, then closes the hosting <dialog>.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceCommand } from '@hydrateless/enhancers/command';

const handle = enhanceCommand(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
`query`	`string`	Not set	Controlled filter query; pair with `onQueryChange` (Vue: `v-model:query`, Svelte: `bind:query`).
`defaultQuery`	`string`	`''`	Uncontrolled initial query.
`onQueryChange`	`(query: string) => void`	Not set	Called with the filter query after every change.
`onCommand`	`(value: string, item: HTMLElement) => void`	Not set	Called when a command runs (Vue: the `command` emit).
`hotkey`	`string`	Not set	Key that, with Cmd/Ctrl, opens the hosting `<dialog>`, e.g. `"k"`; rendered as `data-hl-hotkey`.
`CommandItem.value`*	`string`	Not set	Value reported by `onCommand`; rendered as `data-hl-value`.
`CommandGroup.label`	`string`	Not set	Heading shown above the group. In Vue it is a prop or the `label` slot; in Svelte it is the `label` snippet.
`CommandItem.keywords`	`string`	Not set	Extra terms the filter matches against, rendered as `data-hl-keywords`.

Events and callbacks

Event / Callback	Payload	Description
`hl:command`	`{ value: string, item: HTMLElement }`	Cancelable CustomEvent when a command runs; `preventDefault()` to handle navigation yourself.
`hl:change`	`{ value: string }`	Fires when the filter query changes (also the `onValueChange` enhancer callback).
`hl:open-change`	`{ open: boolean }`	Fires when the hosting `<dialog>` opens or closes (also the `onOpenChange` enhancer callback). The enhancer API exposes `open`/`setOpen` for it.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
`--hl-overlay`	Palette background.
`--hl-border`	Palette border.
`--hl-primary-subtle`	Active item highlight.
`--hl-focus-ring`	Focus ring on the input.

JavaScript

Props

Events and callbacks

CSS variables

Accessibility

Related