Skip to content
Glint UI

Command

A fast, keyboard-navigable command palette with search filtering, item grouping, and modal dialog support.

Usage

import { Command, CommandItem } from "@glint/components/command.slint";


export component AppWindow inherits Window {
    in-out property <string> search-text;


    VerticalLayout {
        alignment: center;


        Command {
            query <=> root.search-text;
            items: [
                { id: "settings", label: "Settings", hint: "Preferences" },
                { id: "profile", label: "Profile", hint: "Account" },
            ];
            selected(id) => {
                // handle command
            }
        }
    }
}

Command provides an inline searchable palette holding a text input over a scrollable list of command options. The search query is two-way (query <=> ...), allowing the host application to filter items dynamically.

Pressing ↑/↓ navigates the highlight, Home/End jumps to list ends, Enter runs the selected command firing selected(id), and Escape fires dismissed().

For full-window modal invocation (such as ⌘K / Ctrl+K), use CommandDialog.

Examples

CommandDialog wraps the command palette in a full-window modal overlay complete with backdrop scrim, focus trap (FocusSentinel), and accessible focus restoration (restore-focus).

Grouped commands with hints and icons

Following Glint’s grouped rows model, commands can be organized into categories using separator-before and heading-before without distorting command indexing. Trailing text hints provide category badges or shortcut keys.

Zero results empty state

When filtering produces an empty array of items, Command displays an Empty state carrying empty-text rather than collapsing into a blank surface.

API Reference

Properties

PropertyTypeDefaultDescription
itemsin [CommandItem]no defaultCommands shown in the palette. Each id is what selected fires with.
queryin-out stringno defaultTwo-way; current search text.
highlighted-indexin-out int0Row that Enter runs; consumers rarely set this directly.
placeholderin string@tr("Type a command or search…")Hint shown in the search field when empty.
empty-textin string@tr("No results found.")Shown in place of the list when items is empty — the state a search palette lands in most often. Set it to "" to show nothing at all.
max-visible-itemsin int8The list shows at most this many rows before it starts scrolling.
auto-focusin boolfalseWhether the search field takes the keyboard as soon as the palette is built. Off inline, where the palette is one thing on a page among many; CommandDialog turns it on for a palette that opens with the window.

Callbacks

CallbackDescription
selected(string)Fired with the chosen command's id.
dismissed()Fired on Escape. The inline surface reports it rather than acting on it: what a dismissal means belongs to whatever hosts the palette.

Functions

FunctionDescription
take-focus()Puts the keyboard in the search field.
release-focus()Gives it up again. Taking it first is what makes this work from anywhere: clear-focus() only speaks for the scope that holds it.

CommandDialog

The full-window modal version of the command palette with backdrop scrim, keyboard trap, and accessible landmark regions.

Properties

PropertyTypeDefaultDescription
openin-out boolfalseTwo-way; consumer sets true to open, Glint sets false on dismissal.
itemsin [CommandItem]no defaultCommands shown in the palette. Each id is what selected fires with.
queryin-out stringno defaultTwo-way; current search text.
highlighted-indexin-out int0Row that Enter runs; consumers rarely set this directly.
placeholderin string@tr("Type a command or search…")Hint shown in the search field when empty.
empty-textin string@tr("No results found.")Shown in place of the list when items is empty.
max-visible-itemsin int8The list shows at most this many rows before it starts scrolling.
labelin string@tr("Command palette")What the open palette announces itself as, and an optional second line. Slint has no dialog role, so the card claims the closest landmark it has — a region — exactly as DialogPanel does, and this names it.
descriptionin stringno default
dismiss-on-backdropin booltrueWhen true, clicking outside the card dismisses the palette.
panel-widthin length540pxWidth of the card.

Callbacks

CallbackDescription
selected(string)Fired with the chosen command's id. The palette closes itself.
dismissed()Fired when the palette closes itself — the backdrop or Escape. Running a command is not a dismissal: selected is the report for that.
restore-focus()Fired on EVERY close, including one the consumer drives by setting open = false, so keyboard focus always gets a new home: restore-focus => { my-button.focus(); }. Slint exposes no "previously focused element", so only the trigger's owner can name it. The same contract Dialog, Sheet and Drawer publish.

Accessibility

  • Landmark and role. Command exposes an accessible list structure containing individual list items with index information. CommandDialog claims an accessible region landmark named by label and described by description.
  • Keyboard focus trap. CommandDialog bounds keyboard navigation within the dialog using FocusSentinel markers, ensuring focus cannot wander outside the modal.
  • Focus restoration. Dismissing CommandDialog invokes restore-focus, allowing applications to hand keyboard focus back to the originating button.
  • Group headings. Category headings are presented as non-focusable informative labels.
  • Keyboard navigation. Navigation keys (↑/↓, Home/End) are captured by the ancestor focus scope before reaching the text input, giving navigation priority over caret positioning.