Command

Fast, composable, unstyled command menu for Vue.

Props

Command

Prop	Type	Default	Description
multiple	boolean	false	Whether multiple options can be selected or not.

Events

Command

Event	Payload	Description
update:modelValue	string	Event handler called when the value changes.

Examples

Default

Suggestions

Calendar

Search Emoji

Calculator

Settings

Profile

Billing

Settings

<script setup>
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut
} from '@empathyds/vue'
</script>

<Command class="rounded-lg border shadow-md">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem value="calendar">Calendar</CommandItem>
      <CommandItem value="search-emoji">Search Emoji</CommandItem>
      <CommandItem value="calculator">Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem value="profile">Profile</CommandItem>
      <CommandItem value="billing">Billing</CommandItem>
      <CommandItem value="settings">Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>