◇

Command

10 parts

Root of a command palette / fuzzy-finder menu (cmdk-style): owns the search term, the registry of items and groups, scoring/filtering, and keyboard-driven highlight + selection. Compose it with CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty, CommandLoading, and CommandSeparator. Reach for it whenever you need a searchable, keyboard-first list of actions or options — a Spotlight-style launcher, an autocomplete menu, or a quick-switcher.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  CommandCancel,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandItemIndicator,
  CommandList,
  CommandLoading,
  CommandRoot,
  CommandSeparator,
} from '@robonen/primitives/menus/command';

<CommandRoot>
  <CommandCancel />
  <CommandEmpty />
  <CommandGroup />
  <CommandInput />
  <CommandItem />
  <CommandItemIndicator />
  <CommandList />
  <CommandLoading />
  <CommandSeparator />
</CommandRoot>

API Reference

CommandCancel

Cancel

A clear/reset affordance for the palette: on click it empties the search term, refocuses the input, and — when `resetValue` is set — also clears the committed `modelValue`. Renders a `<button>` by default. Pair it with `CommandInput`.

Prop	Type	Default	Description
`resetValue`?	`boolean`	—	Also clear the committed `modelValue`, not just the search term.
`label`?	`string`	`'Clear search'`	Accessible label for the control.

CommandEmpty

Empty

Empty-state message shown when the search yields no matching items. By default it appears only while a search term is active; set `always` to also show it for an empty list with no query.

Prop	Type	Default	Description
`always`?	`boolean`	—	Render even while there is no active search term.

CommandGroup

Group

Labelled section that visually clusters related items under an optional heading. Hides itself automatically when every item it contains is filtered out (unless `forceMount`), so empty categories disappear during search.

Prop	Type	Default	Description
`heading`?	`string`	—	Group heading text (rendered when the default slot doesn't override it).
`value`?	`string`	—	Stable identifier for the group. Auto-generated when omitted.
`forceMount`?	`boolean`	—	Render the group even when all of its items are filtered out.

CommandInput

Input

Search box that drives the command palette: typing updates the root search term (and re-filters items), while Arrow/Home/End/Enter move the highlight and commit the selected item. Renders a combobox `<input>` wired up for assistive tech.

Prop	Type	Default	Description
`modelValue`?	`string`	—	Controlled value; falls back to root `searchTerm`.
`disabled`?	`boolean`	—	Disable the input.
`autoFocus`?	`boolean`	—	Focus the input on mount.

CommandItem

Item

A selectable option in the list. Registers itself with the root (so it can be filtered, highlighted, and selected), reflects highlight/selection/disabled state via data attributes, and emits `select` when chosen by click or Enter.

Prop	Type	Default	Description
`value`	`string`	—	Item value — the identity used by selection and `data-value`.
`textValue`?	`string`	—	Plain-text representation the filter should match against. Use it when the `value` is an opaque identity key and the searchable label differs (e.g. non-text children). Falls back to `value` when omitted.
`keywords`?	`string[]`	—	Extra terms the default filter should match against.
`disabled`?	`boolean`	—	Disable this item — it is skipped by keyboard nav and filtering.
`forceMount`?	`boolean`	—	Render even when filtered out.

CommandItemIndicator

ItemIndicator

Renders its content only while the parent `CommandItem` matches the committed `modelValue` — use it to show a check (or any marker) on the selected row of a palette that keeps a persistent selection. Marked `aria-hidden` because the selection state is already conveyed by the item's `aria-selected`.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Render even when the parent item is not the committed selection.

CommandList

List

Scrollable listbox container that holds the items, groups, and empty/loading states. Tracks its content height in the `--primitives-command-list-height` CSS variable so you can animate the palette as results filter in and out.

No props or events — renders its element and forwards attributes.

CommandLoading

Progress indicator for asynchronous results — render it inside the list while fetching items so screen readers announce the loading state. Exposes an optional `progress` value as an accessible progressbar.

Prop	Type	Default	Description
`label`?	`string`	—	Accessible label describing the loading state.
`progress`?	`number`	—	Optional 0..100 progress value — published via `aria-valuenow`.

CommandRoot

Root

Root of a command palette / fuzzy-finder menu (cmdk-style): owns the search term, the registry of items and groups, scoring/filtering, and keyboard-driven highlight + selection. Compose it with `CommandInput`, `CommandList`, `CommandGroup`, `CommandItem`, `CommandEmpty`, `CommandLoading`, and `CommandSeparator`. Reach for it whenever you need a searchable, keyboard-first list of actions or options — a Spotlight-style launcher, an autocomplete menu, or a quick-switcher.

Prop	Type	Default	Description
`modelValue`?	`string`	—	Controlled selected value. Use `v-model`.
`defaultValue`?	`string`	—	Uncontrolled initial selected value.
`searchTerm`?	`string`	—	Controlled search term. Use `v-model:searchTerm`.
`defaultSearchTerm`?	`string`	—	Uncontrolled initial search term.
`filter`?	`CommandFilterFunction`	—	Custom scoring filter. Returns 0..1 (0 = hide).
`shouldFilter`?	`boolean`	`true`	Run the filter automatically. Set false to perform filtering yourself.
`loop`?	`boolean`	`false`	Loop keyboard navigation at the ends of the list.
`label`?	`string`	—	Accessible label announced to assistive tech.
`dir`?	`Direction`	—	Writing direction. When omitted, inherits from a `ConfigProvider`, falling back to `'ltr'`.

Emits

Event	Payload
`update:modelValue`	`[value: string \| undefined]`
`update:searchTerm`	`[value: string]`

CommandSeparator

Separator

Visual divider between groups or items. Hidden automatically while a search term is active (since filtering collapses the list) unless `alwaysRender` is set.

Prop	Type	Default	Description
`alwaysRender`?	`boolean`	—	Render the separator even while the search term is active.