Preview

Installation

npx sigma-ui@latest add combobox

Usage

<script setup lang="ts">
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox';
</script>

<template>
  <Combobox>
    <ComboboxAnchor>
      <ComboboxInput placeholder="Select a framework..." />
    </ComboboxAnchor>
    <ComboboxList>
      <ComboboxEmpty>No framework found.</ComboboxEmpty>
      <ComboboxGroup>
        <ComboboxItem value="nuxt">
          Nuxt
        </ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </Combobox>
</template>

• Bind the selection with v-model.
• by compares objects by a key, for example by="label".
• Use ComboboxTrigger when the field should open from a button instead of the input.

Combobox or Autocomplete

Use Combobox when the value must be one of the options, such as a framework or a status. Typing only filters the list, and the value is the selected option. Use Autocomplete when any text is a valid answer and the options are only suggestions. Its value is the typed string.

Examples

Basic

Trigger

API Reference

Combobox

Props

Prop	Type	Default
open The controlled open state of the Combobox. Can be binded with v-model:open.	boolean	-
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.	-

ComboboxAnchor

Props

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

ComboboxEmpty

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.	-

ComboboxGroup

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.	-

ComboboxInput

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"

Events

Event	Payload
update:modelValue	[string]

Slots

Slot	Scope
default The content of the component.	-

ComboboxItem

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.	-

ComboboxList

Props

Prop	Type	Default
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
position The positioning mode to use, <br> inline is the default and you can control the position using CSS. <br> popper positions content in the same way as our other primitives, for example Popover or DropdownMenu.	"popper" | "inline"	"popper"
bodyLock The document.body will be lock, and scrolling will be disabled.	boolean	-
hideWhenEmpty When true, hides the content when there are no items matching the filter.	boolean	false
memoDependencies Reactive dependencies that should invalidate the memoized content subtree.	unknown[]	-
side The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.	"top" | "right" | "bottom" | "left"	"bottom"
sideOffset The distance in pixels from the trigger.	number	4
sideFlip Flip to the opposite side when colliding with boundary.	boolean	true
align The preferred alignment against the trigger. May change when collisions occur.	"center" | "start" | "end"	"center"
alignOffset An offset in pixels from the start or end alignment options.	number	0
alignFlip Flip alignment when colliding with boundary. May only occur when prioritizePosition is true.	boolean	true
avoidCollisions When true, overrides the side and align preferences to prevent collisions with boundary edges.	boolean	true
collisionBoundary 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.	Element | (Element | null)[] | null	[]
collisionPadding 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 }.	number | Partial<Record<"top" | "right" | "bottom" | "left", number>>	0
arrowPadding 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.	number	0
hideShiftedArrow When true, hides the arrow when it cannot be centered to the reference element.	boolean	true
sticky 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.	"partial" | "always"	"partial"
hideWhenDetached Whether to hide the content when the trigger becomes fully occluded.	boolean	false
positionStrategy The type of CSS position property to use.	"absolute" | "fixed"	-
updatePositionStrategy Strategy to update the position of the floating element on every animation frame.	"always" | "optimized"	'optimized'
disableUpdateOnLayoutShift Whether to disable the update position for the content when the layout shifted.	boolean	false
prioritizePosition Force content to be position within the viewport. Might overlap the reference element, which may not be desired.	boolean	false
reference 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.	ReferenceElement	-
dir The reading direction of the popper content 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"
disableOutsidePointerEvents 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.	boolean	-

Events

Event	Payload
escapeKeyDown Event handler called when the escape key is down. Can be prevented.	[event: KeyboardEvent]
pointerDownOutside Event handler called when a pointerdown event happens outside of the DismissableLayer. Can be prevented.	[event: PointerDownOutsideEvent]
focusOutside Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.	[event: FocusOutsideEvent]
interactOutside Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.	[event: PointerDownOutsideEvent | FocusOutsideEvent]

Slots

Slot	Scope
default The content of the component.	-

ComboboxSeparator

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.	-

Accessibility

Follows the Combobox WAI-ARIA design pattern. Reka UI wires up the input, listbox, and active descendant.

Key	Description
Tab	Moves focus to the input.
ArrowDown	Opens the list and moves to the next option.
ArrowUp	Moves to the previous option.
Enter	Selects the focused option.
Escape	Closes the list.
Home	Moves to the first option.
End	Moves to the last option.