docs · print medium: screen

registry:ui · ARIA

command — the composed ⌘K surface

A modal task on a native dialog: showModal gives the focus trap, Escape and the top layer. The family is composed cmdk-style — every CommandItem SELF-MATCHES against the context predicate (match may only answer inclusion; authored tree order is the byte-stable walk order), emptied groups and the no-matches state are pure CSS :has, and the combobox holds focus with aria-activedescendant. IME-safe, deterministic default match (equals > startsWith > token > includes > keywords as a boolean disjunction), per-item onselect — one execution path.

dialog + showModal self-matching items aria-activedescendant CSS :has group/empty IME-safe

command

Press ⌘K (or the button). Type 'open', walk with arrows, Enter to run — the open state and last action surface below. The disabled audit item renders but never walks, never activates.

or ⌘ + K anywhere

command-usage.svelte svelte

<script lang="ts">
  import Command, {
    CommandInput,
    CommandList,
    CommandEmpty,
    CommandGroup,
    CommandItem,
  } from '@ui/command/index';
  import Kbd from '@ui/kbd/kbd.svelte';
</script>

<!-- label = REQUIRED match text + accessible name; the authored tree
     order IS the walk order (the match predicate may only answer
     inclusion); hint is a snippet — the kbd glyph is authored
     content, never a string→glyph prop. -->
<Command bind:open hotkey>
  <CommandInput placeholder="run a command…" />
  <CommandList>
    <CommandEmpty>nothing matched</CommandEmpty>
    <CommandGroup heading="actions">
      <CommandItem label="Deploy site" onselect={() => deploy()}>
        Deploy site
        {#snippet hint()}<Kbd>⌘D</Kbd>{/snippet}
      </CommandItem>
      <CommandItem label="Run the audit" disabled>
        Run the audit
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

<!-- ⌘K is bound by the component when hotkey; an app-owned trigger: -->
<PressButton onclick={() => (open = true)}>open</PressButton>

types

Command variants

Use the palette for keyboard-first actions, optional hotkeys, and batch selection.

command · types

command-types-demo.svelte svelte

<script lang="ts">
  import Command, {
    CommandInput,
    CommandList,
    CommandGroup,
    CommandItem,
  } from '@ui/command/index';
</script>

<!-- single-shot: Enter runs and closes -->
<Command>
  <CommandInput placeholder="search actions" />
  <CommandList>
    <CommandGroup heading="actions">
      <CommandItem label="Open">Open</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

<!-- closeOnSelect={false}: batch selection keeps the palette open -->
<Command closeOnSelect={false}>
  <CommandInput placeholder="batch actions" />
  <CommandList>
    <CommandGroup heading="batch">
      <CommandItem label="Queue">Queue</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

usage

Usage

Compose the dialog root from its input, list, groups, empty state, and items.

Command usage

<script lang="ts">
  import Command, {
    CommandInput,
    CommandList,
    CommandEmpty,
    CommandGroup,
    CommandItem,
  } from '@ui/command/index';
  import Kbd from '@ui/kbd/kbd.svelte';
</script>

<!-- label = REQUIRED match text + accessible name; the authored tree
     order IS the walk order (the match predicate may only answer
     inclusion); hint is a snippet — the kbd glyph is authored
     content, never a string→glyph prop. -->
<Command bind:open hotkey>
  <CommandInput placeholder="run a command…" />
  <CommandList>
    <CommandEmpty>nothing matched</CommandEmpty>
    <CommandGroup heading="actions">
      <CommandItem label="Deploy site" onselect={() => deploy()}>
        Deploy site
        {#snippet hint()}<Kbd>⌘D</Kbd>{/snippet}
      </CommandItem>
      <CommandItem label="Run the audit" disabled>
        Run the audit
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

<!-- ⌘K is bound by the component when hotkey; an app-owned trigger: -->
<PressButton onclick={() => (open = true)}>open</PressButton>

a11y

Accessibility

The input owns focus while the active option is announced through aria-activedescendant.

Key	Action
`Arrow keys`	Move through visible, enabled options.
`Home / End`	Jump to the first or last option.
`Enter`	Run the active option and close by default.
`Escape`	Close the dialog and restore focus.

Attribute	Value	Description
role	combobox / listbox / option	Exposes the command palette interaction model.
aria-activedescendant	option id	Announces the active option while input retains focus.
aria-expanded	true	Indicates the open listbox state.

theming

Density and tokens

The palette uses shared density tokens for its input, options, and empty state.

default

Token	Default	Source
--jx-hit	density scale	density
--jx-gap	density scale	density
--jx-inset	density scale	density
--jx-stack	density scale	density
--jx-text	density scale	density
--jx-text-secondary	density scale	density
--jx-line	density scale	density

axes

Universal props

The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. Own elevation level4 (the modal rung — the batch C dialog law: the palette is a native showModal() dialog); the shell's corner paint lives in the stylex atom (the consumed-radius swap is a payload-rebuild change, census-recorded).

Command · universal props

⌘K palette: the eight axes resolve on the top-layered dialog (self-carried), the list parts re-stamp through the same contract.

command-universal.svelte svelte

<Command density="small">…</Command>

api

API

Root props control lifecycle and matching; item props provide the searchable command contract.

Command

Property	Type	Default	Description
open `bind`	boolean	false	Bindable dialog open state.
hotkey	boolean	false	Opt into ⌘K / Ctrl+K handling. On THIS docs site the key is shared: the site search palette also opens on ⌘K (window-level, both handlers fire) — the demo palette takes focus and closes on select; the site search stays until dismissed. Consumers embedding the palette elsewhere own their key without the collision.
match	CommandMatch	—	Visibility-only matching predicate.
closeOnSelect	boolean	true	Close after a successful item selection.
label	string	'command palette'	Accessible dialog and combobox label.

Universal props

Property	Type	Default	Description
size	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	the base scale — root font-size; parts size in em
shape	'round' \| 'scoop' \| 'bevel' \| 'notch' \| 'square' \| 'squircle' \| 'auto'	'auto' · ambient scope	corner geometry (CSS corner-shape; §14 degrade table)
radius	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	corner size; auto = the concentric broadcast (§3)
density	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	spacing/leading scale over the kernel channels (§4)
color	'primary' \| 'secondary' \| 'error' \| 'warn' \| 'success' \| 'info' \| 'auto' \| number \| string	'auto' · ambient scope	the hue axis of the fixed oklch primary system (§5)
theme	'light' \| 'dark' \| 'system' \| 'auto'	'auto' · ambient scope	light/dark profile; system = the JS-mutable global (§6)
elevation	'level-1' \| 'level0' \| 'level1' \| 'level2' \| 'level3' \| 'level4' \| 'level5' \| 'auto' \| number	'auto' · ambient scope	official M3 levels over the surface ladder (§7)
motion	'reduced' \| 'subtle' \| 'normal' \| 'expressive' \| 'auto' \| number	'auto' · ambient scope	intensity across the motion kernels (§8)

CommandItem

Property	Type	Default	Description
label *	string	—	Match text and accessible name.
keywords	string	—	Additional match text.
disabled	boolean	false	Renders but never walks or activates.
onselect	() => void	—	Runs once when selected.

command — the composed ⌘K surface

Command variants

Usage

Accessibility

Keyboard

ARIA

Density and tokens

Universal props

API

Command

Universal props

CommandItem