Command

Installation

pnpm dlx @mielui/svelte add command

npx @mielui/svelte add command

yarn dlx @mielui/svelte add command

bunx @mielui/svelte add command

Usage

Compose Trigger and Content inside Root, with Search and Results in Content. Content is a modal dialog that manages focus and closes on Escape. Search updates the matching results when items change, including while a query is active.

Search composes native input and keyboard handlers; preventDefault in onkeydown cancels command navigation or activation. Enter during text composition confirms the text without running a command. Item forwards data attributes to its button or link.

<script lang="ts">
    import * as Command from '@mielui/svelte/components/command';
</script>

<Command.Root>
    <Command.Trigger>Open palette</Command.Trigger>
    <Command.Content>
        <Command.Header>Workspace</Command.Header>
        <Command.Search />
        <Command.Results>
            <Command.Item name="New project">New project</Command.Item>
            <Command.Item name="Settings" href="/settings">Settings</Command.Item>
        </Command.Results>
    </Command.Content>
</Command.Root>

Search and empty-state slots

Search accepts icon, count(total) and announcement(message) snippets. The count is decorative; announcement stays inside the shared polite live region. Results accepts an empty snippet. Omit any slot to retain its default, or supply an empty snippet to hide its content. These slots use the same filtered result count and announcement as the built-in rendering.

<Command.Search placeholder="Find a command">
    {#snippet icon()}
        <span aria-hidden="true">⌘</span>
    {/snippet}
    {#snippet count(total)}
        {total} matches
    {/snippet}
    {#snippet announcement(message)}
        {message}
    {/snippet}
</Command.Search>
<Command.Results>
    {#snippet empty()}
        <p>Try a different search.</p>
    {/snippet}
    <Command.Item name="Open settings">Open settings</Command.Item>
</Command.Results>

Glass surface

Set surface="glass" on Content for a translucent panel with blur, or surface="solid" for an opaque one. Without surface, the panel follows the theme. Glass falls back to an opaque panel when backdrop filtering is unavailable or reduced transparency is on.

Controlling the palette

Bind open on Root to show the palette from a keyboard shortcut or a menu item, and use onOpenChange to hear when it opens or closes. A press outside closes it unless you set allowClickOutside={false} on Content. labels.palette on Root is the palette's accessible name and defaults to Command palette.

Search filters with fuzzy matching. threshold sets how forgiving it is, from 0 for an exact match to 1 for nearly anything, and defaults to 0.2.

Trigger and items

Trigger is built on Button. disabled blocks it, loading with labels shows progress, element binds the DOM node, unstyled removes the Button classes, and onclick runs before the palette opens.

Give an Item callback to run an action, or href to navigate. The palette closes after either, so do not add a second click handler that repeats the action. onclick runs right after callback, name is the text the search matches, and value identifies the item when names repeat. disabled keeps it visible but unselectable.

Root, Content, Header, Results, Group, Item, Separator and Trigger render their children and accept class and style like any element.

Labels

Built-in text is English. Pass a CommandLabels object to labels on Root to translate the palette's name, the search placeholder, the names of the search input and the results list, the empty message, and the result count announced to screen readers. available is a function of the count so the number can sit anywhere in the sentence. Every key is optional, and an omitted key keeps its English default. A placeholder on Search wins over labels.searchPlaceholder.

<script lang="ts">
    import * as Command from '@mielui/svelte/components/command';
    import type { CommandLabels } from '@mielui/svelte/components/command';

    const labels: CommandLabels = {
        palette: 'Palette de commandes',
        searchPlaceholder: 'Rechercher une commande…',
        search: 'Rechercher',
        results: 'Commandes',
        empty: 'Aucun résultat',
        available: (count) => {
            return count === 0 ? 'Aucune commande.' : `${count} commandes disponibles.`;
        }
    };
</script>

<Command.Root {labels}>
    <Command.Trigger>Ouvrir la palette</Command.Trigger>
    <Command.Content>
        <Command.Search />
        <Command.Results>
            <Command.Item name="Nouveau projet">Nouveau projet</Command.Item>
        </Command.Results>
    </Command.Content>
</Command.Root>