◇

Command

8 parts

Anatomy

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

vue

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

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

API Reference

CommandEmpty

Empty

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

CommandGroup

Group

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

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

Prop	Type	Default	Description
`value`	`string`	—	Item value — used by filter, selection, and `data-value`.
`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.

CommandList

List

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

CommandLoading

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

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.

CommandSeparator

Separator

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