Suggestions

Calendar

Search Emoji

Calculator

Settings

Profile⌘P

Billing⌘B

Settings⌘S

Installation

pnpm dlx kliping@latest add command

Usage

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

<template>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search Emoji</CommandItem>
        <CommandItem>Calculator</CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem>Profile</CommandItem>
        <CommandItem>Billing</CommandItem>
        <CommandItem>Settings</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Kliping items	dialog
Files	components/ui/command/command.vue components/ui/command/command-dialog.vue components/ui/command/command-empty.vue components/ui/command/command-group.vue components/ui/command/command-input.vue components/ui/command/command-item.vue components/ui/command/command-list.vue components/ui/command/command-separator.vue components/ui/command/command-shortcut.vue components/ui/command/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Command>
  <CommandInput />
  <CommandList>
    <CommandEmpty />
    <CommandGroup>
      <CommandItem>
        <CommandShortcut />
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
  </CommandList>
</Command>

Bagian lain yang tersedia: CommandDialog.

API Reference

Command

Prop	Type	Default	Description
modelValue?	AcceptableValue | AcceptableValue[]	""	The controlled value of the listbox. Can be binded with v-model.
defaultValue?	AcceptableValue | AcceptableValue[]	—	The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox
multiple?	boolean	—	Whether multiple options can be selected or not.
orientation?	DataOrientation	—	The orientation of the listbox. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
dir?	Direction	—	The reading direction of the listbox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
disabled?	boolean	—	When true, prevents the user from interacting with listbox
selectionBehavior?	"replace" | "toggle"	—	How multiple selection should behave in the collection.
highlightOnHover?	boolean	true	When true, hover over item will trigger highlight
by?	string | ((a: AcceptableValue, b: AcceptableValue) => boolean)	—	Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.

Event	Payload	Description
@update:modelValue	[value: AcceptableValue]	Emitted when the value changes.
@highlight	[payload: { ref: HTMLElement; value: AcceptableValue; } | undefined]	Emitted when the highlighted item changes, by pointer or keyboard.
@entryFocus	[event: CustomEvent<any>]	Emitted when focus enters the group; call event.preventDefault() to skip focusing the first item.
@leave	[event: Event]	Emitted when the pointer leaves the list.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"command"

CommandDialog

Prop	Type	Default	Description
open?	boolean	—	The controlled open state of the dialog. Can be binded as v-model:open.
defaultOpen?	boolean	—	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
modal?	boolean	—	The modality of the dialog When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
unmountOnHide?	boolean	—	When set to false, the dialog content will not be unmounted when closed, but instead hidden with CSS. Useful for SEO or when you want to improve performance by not remounting the component on every open.
title?	string	"Command Palette"	Dialog title, visually hidden and read by screen readers.
description?	string	"Search for a command to run..."	Dialog description, visually hidden and read by screen readers.

Event	Payload	Description
@update:open	[value: boolean]	Emitted when the open state changes.

Slot	Props
#default	{ open: boolean; close: () => void; }

CommandEmpty

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

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"command-empty"

CommandGroup

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

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"command-group"

CommandInput

Prop	Type	Default	Description
modelValue?	string	—	The controlled value of the filter. Can be binded with v-model.
autoFocus?	boolean	—	Focus on element when mounted.
disabled?	boolean	—	When true, prevents the user from interacting with item
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Data attribute	Value
[data-slot]	"command-input-wrapper"

CommandItem

Prop	Type	Default	Description
value	AcceptableValue	—	The value given as data when submitted with a name.
disabled?	boolean	—	When true, prevents the user from interacting with the item.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@select	[event: SelectEvent$3<AcceptableValue>]	Emitted when it is selected, by pointer or keyboard; call event.preventDefault() to keep the menu open.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"command-item"

CommandList

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

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"command-list"

CommandSeparator

Prop	Type	Default	Description
orientation?	DataOrientation	—	Orientation of the component. Either vertical or horizontal. Defaults to horizontal.
decorative?	boolean	true	Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"command-separator"

CommandShortcut

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"command-shortcut"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Listbox yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Enter	When highlight on ListboxItem, selects the focused item.
ArrowDown	When focus is on ListboxItem, moves focus to the next item.
ArrowUp	When focus is on ListboxItem, moves focus to the previous item.
Home	Moves focus and highlight to the first item.
End	Moves focus and highlight to the last item.
Ctrl/Cmd + A	Select all the items.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --border, --foreground, --muted-foreground, --popover, --popover-foreground, --radius.

Changelog

• 19 Okt 2026 · Fixed — Aksesibilitas: nama aksesibel dan peran ARIA yang sah.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.