Preview

Installation

npx sigma-ui@latest add command

Usage

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

<template>
  <Command>
    <CommandInput placeholder="Type a command..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem value="calendar">
          Calendar
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

Wrap it in CommandDialog for a command palette, or in Popover / DropdownMenu for an inline menu.

Examples

Basic

Dialog

Popover

Dropdown menu

Responsive

Popover on desktop and Drawer on mobile.

Form

API Reference

Command

Props

Prop	Type	Default
open The controlled open state of the Combobox. Can be binded with v-model:open.	boolean	true
defaultOpen The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.	boolean	-
resetSearchTermOnBlur Whether to reset the searchTerm when the Combobox input blurred	boolean	`true`
resetSearchTermOnSelect Whether to reset the searchTerm when the Combobox value is selected	boolean	`true`
openOnFocus Whether to open the combobox when the input is focused	boolean	`false`
openOnClick Whether to open the combobox when the input is clicked	boolean	`false`
ignoreFilter When true, disable the default filters	boolean	-
resetModelValueOnClear When true the modelValue will be reset to null (or [] if multiple)	boolean	-
unmountOnHide When set to false, the Combobox content will not be unmounted when closed, but instead hidden with CSS. <br> Useful when you want to improve performance by not remounting the content on every open.	boolean	true
multiple Whether multiple options can be selected or not.	boolean	-
disabled When true, prevents the user from interacting with listbox	boolean	-
dir The reading direction of the listbox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
modelValue The controlled value of the listbox. Can be binded with v-model.	AcceptableValue | AcceptableValue[]	""
defaultValue The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox	AcceptableValue | AcceptableValue[]	-
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-
highlightOnHover When true, hover over item will trigger highlight	boolean	-
loop When true, keyboard navigation will loop from last item to first, and vice versa.	boolean	-
by Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.	string | ((a: AcceptableValue, b: AcceptableValue) => boolean)	-

Events

Event	Payload
update:modelValue Event handler called when the value changes.	[value: AcceptableValue]
update:open Event handler called when the open state of the combobox changes.	[value: boolean]
highlight Event handler when highlighted element changes.	[payload: { ref: HTMLElement; value: AcceptableValue; }]

Slots

Slot	Scope
default The content of the component.	-

CommandDialog

Props

Prop	Type	Default
open The controlled open state of the dialog. Can be binded as v-model:open.	boolean	-
defaultOpen The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.	boolean	-
modal The modality of the dialog When set to true, <br> interaction with outside elements will be disabled and only dialog content will be visible to screen readers.	boolean	-
unmountOnHide When set to false, the dialog content will not be unmounted when closed, but instead hidden with CSS. <br> Useful for SEO or when you want to improve performance by not remounting the component on every open.	boolean	true

Events

Event	Payload
update:open Event handler called when the open state of the dialog changes.	[value: boolean]

Slots

Slot	Scope
default The content of the component.	-

CommandEmpty

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

CommandGroup

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
heading Label shown above the group items.	string	-

Slots

Slot	Scope
default The content of the component.	-

CommandInput

Props

Prop	Type	Default
displayValue The display value of input for selected item. Does not work with multiple.	((val: any) => string)	-
modelValue The controlled value of the filter. Can be binded with v-model.	string	-
autoFocus Focus on element when mounted.	boolean	-
disabled When true, prevents the user from interacting with item	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

CommandItem

Props

Prop	Type	Default
textValue A string representation of the item contents. If the children are not plain text, then the textValue prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.	string	-
valuerequired The value given as data when submitted with a name.	AcceptableValue	-
disabled When true, prevents the user from interacting with the item.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
select Event handler called when the selecting item. <br> It can be prevented by calling event.preventDefault.	[event: SelectEvent$3<AcceptableValue>]

Slots

Slot	Scope
default The content of the component.	-

CommandList

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

CommandSeparator

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

CommandShortcut

Slots

Slot	Scope
default The content of the component.	-

Accessibility

The menu is a listbox. The input filters the options, and arrow keys move the active item. Reka UI sets role="listbox" and the active descendant.

Key	Description
Tab	Moves focus to the search input.
ArrowDown	Moves to the next item.
ArrowUp	Moves to the previous item.
Enter	Runs the focused item.
Escape	Closes the menu when it is inside a dialog or popover.