Combobox bisa dibangun lewat dua cara:

• Memakai komponen Combobox, yang dibangun di atas Combobox milik Reka UI.
• Memadukan komponen Popover dan Command menjadi sebuah listbox.

Installation

Combobox

pnpm dlx kliping@latest add combobox

Popover dan Command

Varian listbox dibangun dari perpaduan komponen Popover dan Command.

Ikuti langkah pemasangan komponen Popover dan Command terlebih dahulu.

Usage

Combobox

<script setup lang="ts">
import { CheckIcon, ChevronsUpDownIcon } from '@lucide/vue'
import { ref } from 'vue'
import { Button } from '@/components/ui/button'
import {
  Combobox,
  ComboboxAnchor,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
  ComboboxTrigger,
} from '@/components/ui/combobox'

const frameworks = [
  { value: 'next.js', label: 'Next.js' },
  { value: 'sveltekit', label: 'SvelteKit' },
  { value: 'nuxt.js', label: 'Nuxt.js' },
  { value: 'remix', label: 'Remix' },
  { value: 'astro', label: 'Astro' },
]

const selectedFramework = ref<(typeof frameworks)[number]>()
</script>

<template>
  <Combobox v-model="selectedFramework" by="label">
    <ComboboxAnchor as-child>
      <ComboboxTrigger as-child>
        <Button variant="outline" class="w-[200px] justify-between">
          {{ selectedFramework?.label ?? 'Select framework...' }}
          <ChevronsUpDownIcon class="opacity-50" />
        </Button>
      </ComboboxTrigger>
    </ComboboxAnchor>

    <ComboboxList>
      <ComboboxInput placeholder="Search framework..." />
      <ComboboxEmpty>No framework found.</ComboboxEmpty>
      <ComboboxGroup>
        <ComboboxItem
          v-for="framework in frameworks"
          :key="framework.value"
          :value="framework"
        >
          {{ framework.label }}
          <ComboboxItemIndicator>
            <CheckIcon />
          </ComboboxItemIndicator>
        </ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </Combobox>
</template>

Popover dan Command

<script setup lang="ts">
import { CheckIcon, ChevronsUpDownIcon } from '@lucide/vue'
import { ref } from 'vue'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'

const frameworks = [
  { value: 'next.js', label: 'Next.js' },
  { value: 'sveltekit', label: 'SvelteKit' },
  { value: 'nuxt.js', label: 'Nuxt.js' },
  { value: 'remix', label: 'Remix' },
  { value: 'astro', label: 'Astro' },
]

const open = ref(false)
const value = ref('')
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button
        variant="outline"
        role="combobox"
        :aria-expanded="open"
        class="w-[200px] justify-between"
      >
        {{
          value
            ? frameworks.find(framework => framework.value === value)?.label
            : 'Select framework...'
        }}
        <ChevronsUpDownIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-[200px] p-0">
      <Command>
        <CommandInput placeholder="Search framework..." />
        <CommandList>
          <CommandEmpty>No framework found.</CommandEmpty>
          <CommandGroup>
            <CommandItem
              v-for="framework in frameworks"
              :key="framework.value"
              :value="framework.value"
              @select="() => {
                value = value === framework.value ? '' : framework.value
                open = false
              }"
            >
              <CheckIcon
                :class="cn(
                  'mr-2 h-4 w-4',
                  value === framework.value ? 'opacity-100' : 'opacity-0',
                )"
              />
              {{ framework.label }}
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </PopoverContent>
  </Popover>
</template>

Examples

User

Combobox dengan tampilan item kustom dan satu item aksi.

Zona Waktu

Combobox dengan item berkelompok dan area yang bisa digulir.

Pilihan Ganda

Combobox yang bisa memilih lebih dari satu.

Dengan Listbox

Combobox yang dibangun dari komponen Popover dan Command.

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
Files	components/ui/combobox/combobox.vue components/ui/combobox/combobox-anchor.vue components/ui/combobox/combobox-empty.vue components/ui/combobox/combobox-group.vue components/ui/combobox/combobox-input.vue components/ui/combobox/combobox-item.vue components/ui/combobox/combobox-item-indicator.vue components/ui/combobox/combobox-list.vue components/ui/combobox/combobox-separator.vue components/ui/combobox/combobox-trigger.vue components/ui/combobox/combobox-viewport.vue components/ui/combobox/index.ts

Anatomy

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

<Combobox>
  <ComboboxAnchor>
    <ComboboxTrigger />
  </ComboboxAnchor>
  <ComboboxList>
    <ComboboxInput />
    <ComboboxEmpty />
    <ComboboxGroup>
      <ComboboxItem>
        <ComboboxItemIndicator />
      </ComboboxItem>
    </ComboboxGroup>
    <ComboboxViewport>
      <ComboboxEmpty />
      <ComboboxGroup>
        <ComboboxItem>
          <ComboboxItemIndicator />
        </ComboboxItem>
      </ComboboxGroup>
    </ComboboxViewport>
    <ComboboxSeparator />
  </ComboboxList>
</Combobox>

API Reference

Combobox

Prop	Type	Default	Description
open?	boolean	—	The controlled open state of the Combobox. Can be binded with v-model:open.
defaultOpen?	boolean	—	The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
resetSearchTermOnBlur?	boolean	—	Whether to reset the searchTerm when the Combobox input blurred
resetSearchTermOnSelect?	boolean	—	Whether to reset the searchTerm when the Combobox value is selected
openOnFocus?	boolean	—	Whether to open the combobox when the input is focused
openOnClick?	boolean	—	Whether to open the combobox when the input is clicked
ignoreFilter?	boolean	—	When true, disable the default filters
resetModelValueOnClear?	boolean	—	When true the modelValue will be reset to null (or [] if multiple)
multiple?	boolean	—	Whether multiple options can be selected or not.
disabled?	boolean	—	When true, prevents the user from interacting with listbox
dir?	Direction	—	The reading direction of the listbox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
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.
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
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.
highlightOnHover?	boolean	—	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.

Event	Payload	Description
@update:modelValue	[value: AcceptableValue]	Emitted when the value changes.
@update:open	[value: boolean]	Emitted when the open state changes.
@highlight	[payload: { ref: HTMLElement; value: AcceptableValue; } | undefined]	Emitted when the highlighted item changes, by pointer or keyboard.

Slot	Props
#default	{ open: boolean; modelValue: string | number | bigint | Record<string, any> | (string | number | bigint | Record<string, any> | null)[] | null; }

Data attribute	Value
[data-slot]	"combobox"

ComboboxAnchor

Prop	Type	Default	Description
reference?	ReferenceElement	—	The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
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]	"combobox-anchor"

ComboboxEmpty

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]	"combobox-empty"

ComboboxGroup

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]	"combobox-group"

ComboboxInput

Prop	Type	Default	Description
displayValue?	((val: any) => string)	—	The display value of input for selected item. Does not work with multiple.
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.

Event	Payload	Description
@update:modelValue	[string]	Emitted when the value changes.

Slot	Props
#default	—

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

ComboboxItem

Prop	Type	Default	Description
textValue?	string	—	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.
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]	"combobox-item"

ComboboxItemIndicator

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]	"combobox-item-indicator"

ComboboxList

Prop	Type	Default	Description
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
position?	"popper" | "inline"	"popper"	The positioning mode to use, inline is the default and you can control the position using CSS. popper positions content in the same way as our other primitives, for example Popover or DropdownMenu.
bodyLock?	boolean	—	The document.body will be lock, and scrolling will be disabled.
hideWhenEmpty?	boolean	—	When true, hides the content when there are no items matching the filter.
memoDependencies?	unknown[]	—	Reactive dependencies that should invalidate the memoized content subtree.
side?	"bottom" | "top" | "right" | "left"	—	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
sideOffset?	number	4	The distance in pixels from the trigger.
sideFlip?	boolean	—	Flip to the opposite side when colliding with boundary.
align?	"start" | "end" | "center"	"center"	The preferred alignment against the trigger. May change when collisions occur.
alignOffset?	number	—	An offset in pixels from the start or end alignment options.
alignFlip?	boolean	—	Flip alignment when colliding with boundary. May only occur when prioritizePosition is true.
avoidCollisions?	boolean	—	When true, overrides the side and align preferences to prevent collisions with boundary edges.
collisionBoundary?	Element | (Element | null)[]	—	The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
collisionPadding?	number | Partial<Record<"bottom" | "top" | "right" | "left", number>>	—	The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
arrowPadding?	number	—	The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
hideShiftedArrow?	boolean	—	When true, hides the arrow when it cannot be centered to the reference element.
sticky?	"partial" | "always"	—	The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
hideWhenDetached?	boolean	—	Whether to hide the content when the trigger becomes fully occluded.
positionStrategy?	"fixed" | "absolute"	—	The type of CSS position property to use.
updatePositionStrategy?	"always" | "optimized"	—	Strategy to update the position of the floating element on every animation frame.
disableUpdateOnLayoutShift?	boolean	—	Whether to disable the update position for the content when the layout shifted.
prioritizePosition?	boolean	—	Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
reference?	ReferenceElement	—	The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
dir?	Direction	—	The reading direction of the popper content when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
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.
disableOutsidePointerEvents?	boolean	—	When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element.

Event	Payload	Description
@escapeKeyDown	[event: KeyboardEvent]	Emitted when Escape is pressed; call event.preventDefault() to keep it open.
@pointerDownOutside	[event: PointerDownOutsideEvent]	Emitted on a pointer down outside; call event.preventDefault() to keep it open.
@focusOutside	[event: FocusOutsideEvent]	Emitted when focus moves outside; call event.preventDefault() to keep it open.
@interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent]	Emitted on any pointer down or focus outside; call event.preventDefault() to keep it open.

Slot	Props
#default	—

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

ComboboxSeparator

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]	"combobox-separator"

ComboboxTrigger

Prop	Type	Default	Description
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.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"combobox-trigger"

ComboboxViewport

Prop	Type	Default	Description
nonce?	string	—	Will add nonce attribute to the style tag which can be used by Content Security Policy. If omitted, inherits globally from ConfigProvider.
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]	"combobox-viewport"

Keyboard Interactions

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

Key	Description
Enter	When focus is on ComboboxItem, selects the focused item.
ArrowDown	When focus is on ComboboxInput, opens the combobox content. When focus is on an item, moves focus to the next item.
ArrowUp	When focus is on ComboboxInput, opens the combobox content. When focus is on an item, moves focus to the previous item.
Esc	Closes combobox and restores the selected item in the ComboboxInput field.

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.