Actions & Overlays

Command Palette

A filterable list of commands with keyboard navigation.

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

A filterable list of commands with keyboard navigation and an empty state. Render it inline, or drop it inside a <dialog> and open it with a hotkey.

Command palette

Type to filter, navigate with ↑/↓, and run with Enter.

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(container, { hotkey, onCommand });
// 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
`onSelect`	`(value: string) => void`	—	Fires when a command runs.
`hotkey`	`string`	—	Key that opens the palette when wrapped in a dialog, e.g. `"k"`.

Events and callbacks

Event / Callback	Payload	Description
`hl:command`	`{ value: string; item: HTMLElement }`	Cancelable CustomEvent when a command runs; `preventDefault()` to handle navigation yourself.

CSS variables

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

CSS variable	Used for
`--hl-surface`	Palette background.
`--hl-border`	Palette border.
`--hl-primary`	Active item highlight.

JavaScript

Props

Events and callbacks

CSS variables

Accessibility

Related