Studio
2

Command

Installation

pnpm dlx @mielui/svelte add command

Usage

Compose Trigger, Search, and Results inside Root. Content manages focus and Escape dismissal. Search updates 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.

import * as Command from '$lib/mielui/components/command';

<Command.Root>
  <Command.Trigger>Open palette</Command.Trigger>
  <Command.Content>
    <Command.Header>
      <span>Command</span>
    </Command.Header>
    <Command.Search placeholder="Search..." />
    <Command.Results>
      <Command.Item name="search">Item</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 value="settings">Open settings</Command.Item>
</Command.Results>

Examples

With groups

Glass surface

Set surface="glass" on Command.Content for a translucent background with blur. Solid remains the default. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

Make selection do something

Use callback for an action or href for navigation. The examples report the selected command below the trigger. Filtering, keyboard movement, and closing remain owned by Command; avoid attaching a second click handler that performs the same action twice.

API reference

Command.Root

Provides command menu state.

Prop Type Default
open Bindable boolean | undefined false
onOpenChange ((open: boolean) => void) | undefined —
children Snippet<[]> | undefined —

Command.Content

Contains command menu controls.

Prop Type Default
surface "solid" | "glass" | undefined —
children Snippet<[]> | undefined —
class string | undefined —
allowClickOutside boolean | undefined true
label string | undefined 'Command palette'

Command.Group

Groups command items.

Prop Type Default
children Required Snippet<[]> —
class string | undefined —
heading Required string —

Command.Header

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

Command.Item

Defines a command action.

Prop Type Default
name string | undefined —
value string | undefined —
callback (() => void) | undefined —
disabled boolean | undefined false
href string | undefined —
onclick (() => void) | undefined —
class string | undefined —
children Snippet<[]> | undefined —

Command.Results

Lists matching commands.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —
empty Snippet<[]> | undefined —

Command.Search

Filters command items.

Prop Type Default
threshold number | undefined DEFAULT_COMMAND_SEARCH_THRESHOLD
icon Snippet<[]> | undefined —
count Snippet<[count: number]> | undefined —
announcement Snippet<[message: string]> | undefined —

Command.Separator

Separates command menu items.

Prop Type Default
children Snippet<[]> | undefined —
class string | undefined —

Command.Trigger

Opens the command menu.

Prop Type Default
disabled boolean | undefined —
variant ButtonVariant | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
children Snippet<[]> | undefined —
element HTMLButtonElement | HTMLAnchorElement | undefined

Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:

 —
unstyled boolean | undefined

Skip the variant/size base classes and render with `class` alone.

 —
status ButtonStatus | undefined

Controlled visual state. Loading remains focusable and refuses activation.

 —
loading boolean | undefined

Convenience alias for `status="loading"`.

 —
loadingLabel string | undefined —
successLabel string | undefined —
errorLabel string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
onkeydown ((event: KeyboardEvent) => void) | undefined —
href string | undefined —