Combobox

Overview

A combobox for searching and selecting values from an option list, with an explicit anchor composition, clearable input, and complete popup/filtering behavior. The input filters options as you type and keyboard navigation follows the WAI-ARIA combobox pattern. Use it when users must type to filter a list; for selection without typing, use SSelect; for fuzzy-matching suggestions over text, use SAutocomplete.

Usage

Features

🔍 Type-to-filter with a three-state filter model (matched / empty / unset)
⌨️ Full keyboard navigation — Arrow keys, Enter/Space select, typeahead, Escape close
📜 Optional virtual scrolling (ComboboxVirtualizer)
🗂 Grouping with group labels and separators
🧹 Trigger clear icon deselects (clearable); the popup cancel clears only the search input
🧩 ComboboxValue primitive renders the selected labels (or placeholder) for custom trigger layouts
📊 Data-driven ComboboxCompact API — items (options use label / value fields) + grouping
🎛 Controlled / uncontrolled with v-model:open and filter semantics (ignoreFilter, resetSearchTermOnBlur)
♿ Full accessibility support — role="combobox" / listbox / option, aria-activedescendant, axe-clean

Demos

Basic

100%

Selected: None

Group

100%

Custom Styling

100%

Value

100%

API

Aria Layer

Combobox<M>

38 Props11 Emits12 Slots

Props

Prop	Type	Default	Description
class	ClassValue	—	Additional class names applied to the root element.
size	ThemeSize	—	Visual size of the component.
ui	Partial<ComboboxUi>	—	Per-slot class overrides for the component.
items	ComboboxOptionData[]	—	Items rendered by the component.
placeholder	string	—	Placeholder.
searchPlaceholder	string	—	Search placeholder.
clearLabel	string	—	Clear label.
emptyLabel	string	—	Empty label.
anchorProps	ComboboxAnchorProps	—	Properties forwarded to the anchor element.
triggerProps	ComboboxTriggerProps	—	Properties forwarded to the trigger element.
cancelProps	ComboboxCancelProps	—	Properties forwarded to the cancel element.
valueProps	ComboboxValueProps	—	Properties forwarded to the value element.
portalProps	ComboboxPortalProps	—	Properties forwarded to the portal element.
contentProps	ComboboxContentProps	—	Properties forwarded to the content element.
viewportProps	ComboboxViewportProps	—	Properties forwarded to the viewport element.
inputProps	ComboboxInputProps	—	Properties forwarded to the input element.
emptyProps	ComboboxEmptyProps	—	Properties forwarded to the empty element.
groupProps	ListboxGroupProps	—	Properties forwarded to the group element.
groupLabelProps	ComboboxGroupLabelProps	—	Properties forwarded to the group label element.
itemProps	ComboboxItemProps	—	Properties forwarded to the item element.
itemIndicatorProps	ComboboxItemIndicatorProps	—	Properties forwarded to the item indicator element.
separatorProps	ComboboxSeparatorProps	—	Properties forwarded to the separator element.
open	boolean	—	The controlled open state of the Combobox. Can be bound with `v-model:open`.
defaultOpen	boolean	—	The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
resetSearchTermOnBlur	boolean	`true`	Whether to reset the searchTerm when the Combobox input blurred
resetSearchTermOnSelect	boolean	`true`	Whether to reset the searchTerm when the Combobox value is selected
openOnFocus	boolean	`false`	Whether to open the combobox when the input is focused
openOnClick	boolean	`false`	Whether to open the combobox when the input is clicked
ignoreFilter	boolean	—	When `true`, disable the default filters
clearable	boolean	—	Whether selected item can be cleared when `multiple` is false.
modelValue	(M extends true ? string[] : string)	—	The controlled value of the selected item(s). Use this when you need to control the state of the items. Can be bound with `v-model`
defaultValue	(M extends true ? string[] : string)	—	The default value of the selected item(s). Use this when you need to set the initial state of the items.
multiple	M	—	Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from `modelValue` and `defaultValue`.
disabled	boolean	—	When `true`, prevents the user from interacting with listbox
dir	Direction	—	The reading direction of the listbox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
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
required	boolean	—	When `true`, indicates that the user must set the value before the owning form can be submitted.

Emits

Emit Name	Parameters	Description
update:modelValue	M extends true ? string[] : string	—
highlight	CollectionItemData<ListboxCollectionItemData> \| undefined	Event handler when highlighted element changes.
update:open	boolean	Emitted when the open state changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	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.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
placed	—	Event handler called when the positioner is placed
select	SelectEvent<string>	Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`.

Slots

Slot Name	Parameters	Description
trigger-leading	—	Custom content for the trigger leading slot.
trigger-value	ComboboxCompactTriggerValueSlotProps<M>	Custom content for the trigger value slot.
trigger-trailing	—	Custom content for the trigger trailing slot.
trigger-icon	—	Custom content for the trigger icon slot.
input-leading	ComboboxCompactInputSlotProps	Custom content for the input leading slot.
input-trailing	ComboboxCompactInputSlotProps	Custom content for the input trailing slot.
empty	—	Custom content for the empty slot.
group-label	ComboboxCompactGroupLabelSlotProps	Custom content for the group label slot.
item-leading	ComboboxCompactItemSlotProps	Custom content for the item leading slot.
item-text	ComboboxCompactItemSlotProps	Custom content for the item text slot.
item-trailing	ComboboxCompactItemSlotProps	Custom content for the item trailing slot.
item-indicator	ComboboxCompactItemSlotProps	Custom content for the item indicator slot.

ComboboxAnchor

3 Props

Props

Prop	Type	Default	Description
reference	ReferenceElement	—	—
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

ComboboxArrow

ComboboxCancel

3 Props

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

ComboboxClear

2 Props

Props

Prop	Type	Default	Description
ariaLabel	string	—	Aria label for the clear button.
disabled	boolean	—	Whether the clear button is disabled.

ComboboxCompact<M>

35 Props11 Emits12 Slots

Props

Prop	Type	Default	Description
items	ComboboxOptionData[]	—	Items rendered by the component.
placeholder	string	—	Placeholder.
searchPlaceholder	string	—	Search placeholder.
clearLabel	string	—	Clear label.
emptyLabel	string	—	Empty label.
anchorProps	ComboboxAnchorProps	—	Properties forwarded to the anchor element.
triggerProps	ComboboxTriggerProps	—	Properties forwarded to the trigger element.
cancelProps	ComboboxCancelProps	—	Properties forwarded to the cancel element.
valueProps	ComboboxValueProps	—	Properties forwarded to the value element.
portalProps	ComboboxPortalProps	—	Properties forwarded to the portal element.
contentProps	ComboboxContentProps	—	Properties forwarded to the content element.
viewportProps	ComboboxViewportProps	—	Properties forwarded to the viewport element.
inputProps	ComboboxInputProps	—	Properties forwarded to the input element.
emptyProps	ComboboxEmptyProps	—	Properties forwarded to the empty element.
groupProps	ListboxGroupProps	—	Properties forwarded to the group element.
groupLabelProps	ComboboxGroupLabelProps	—	Properties forwarded to the group label element.
itemProps	ComboboxItemProps	—	Properties forwarded to the item element.
itemIndicatorProps	ComboboxItemIndicatorProps	—	Properties forwarded to the item indicator element.
separatorProps	ComboboxSeparatorProps	—	Properties forwarded to the separator element.
open	boolean	—	The controlled open state of the Combobox. Can be bound with `v-model:open`.
defaultOpen	boolean	—	The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
resetSearchTermOnBlur	boolean	`true`	Whether to reset the searchTerm when the Combobox input blurred
resetSearchTermOnSelect	boolean	`true`	Whether to reset the searchTerm when the Combobox value is selected
openOnFocus	boolean	`false`	Whether to open the combobox when the input is focused
openOnClick	boolean	`false`	Whether to open the combobox when the input is clicked
ignoreFilter	boolean	—	When `true`, disable the default filters
clearable	boolean	—	Whether selected item can be cleared when `multiple` is false.
modelValue	(M extends true ? string[] : string)	—	The controlled value of the selected item(s). Use this when you need to control the state of the items. Can be bound with `v-model`
defaultValue	(M extends true ? string[] : string)	—	The default value of the selected item(s). Use this when you need to set the initial state of the items.
multiple	M	—	Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from `modelValue` and `defaultValue`.
disabled	boolean	—	When `true`, prevents the user from interacting with listbox
dir	Direction	—	The reading direction of the listbox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
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
required	boolean	—	When `true`, indicates that the user must set the value before the owning form can be submitted.

Emits

Emit Name	Parameters	Description
update:modelValue	M extends true ? string[] : string	—
highlight	CollectionItemData<ListboxCollectionItemData> \| undefined	Event handler when highlighted element changes.
update:open	boolean	Emitted when the open state changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	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.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
placed	—	Event handler called when the positioner is placed
select	SelectEvent<string>	Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`.

Slots

Slot Name	Parameters	Description
trigger-leading	—	Custom content for the trigger leading slot.
trigger-value	ComboboxCompactTriggerValueSlotProps<M>	Custom content for the trigger value slot.
trigger-trailing	—	Custom content for the trigger trailing slot.
trigger-icon	—	Custom content for the trigger icon slot.
input-leading	ComboboxCompactInputSlotProps	Custom content for the input leading slot.
input-trailing	ComboboxCompactInputSlotProps	Custom content for the input trailing slot.
empty	—	Custom content for the empty slot.
group-label	ComboboxCompactGroupLabelSlotProps	Custom content for the group label slot.
item-leading	ComboboxCompactItemSlotProps	Custom content for the item leading slot.
item-text	ComboboxCompactItemSlotProps	Custom content for the item text slot.
item-trailing	ComboboxCompactItemSlotProps	Custom content for the item trailing slot.
item-indicator	ComboboxCompactItemSlotProps	Custom content for the item indicator slot.

ComboboxContent

27 Props7 Emits

Props

Prop	Type	Default	Description
position	'inline' \| 'popper'	—	Position.
bodyLock	boolean	—	Whether body lock.
hideWhenEmpty	boolean	—	Whether hide when empty.
popupProps	PopperPositioningPopupProps	—	Properties forwarded to the popup element.
open	boolean	true	Whether the floating layer is open. Drives the positioning lifecycle (`isPositioned` resets when open flips); the positioning primitive itself has no open state, so consumers wire their own open state here.
placement	Placement	undefined	The placement of the floating element. If used, it will override the `side` and `align` props.
side	Side	'bottom'	The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
sideOffset	number	0	The distance in pixels from the anchor.
sideFlip	boolean	true	Flip to the opposite side when colliding with boundary.
align	Align	'center'	The preferred alignment against the anchor. May change when collisions occur.
alignOffset	number	0	An offset in pixels from the `start` or `end` alignment options.
alignFlip	boolean	true	Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
avoidCollisions	boolean	true	When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
collisionBoundary	Element \| (Element \| null)[] \| 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	Padding	0	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	0	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	false	When `true`, hides the arrow when it cannot be centered to the reference element.
sticky	'partial' \| 'always'	'partial'	The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the anchor is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
hideWhenDetached	boolean	false	Whether to hide the content when the anchor becomes fully occluded.
positionStrategy	'fixed' \| 'absolute'	'fixed'	The type of CSS position property to use.
updatePositionStrategy	'always' \| 'optimized'	'optimized'	Strategy to update the position of the floating element on every animation frame.
disableUpdateOnLayoutShift	boolean	false	Whether to disable the update position for the content when the layout shifted.
prioritizePosition	boolean	false	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.
trapFocus	boolean	false	When `true`, focus cannot escape the content via keyboard, pointer, or a programmatic focus.
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.
forceMount	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Emits

Emit Name	Parameters	Description
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	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.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
placed	—	Event handler called when the positioner is placed

ComboboxEmpty

2 Props

Props

Prop	Type	Default	Description
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

ComboboxGroup

ComboboxGroupLabel

ComboboxInput

18 Props1 Emits

Props

Prop	Type	Default	Description
displayValue	((value: MaybeArray<string>) => string)	—	Display value.
inputRef	((el: HTMLInputElement) => void)	—	The function to set the input element.
controlProps	InputControlProps	—	The props of the input extra props.
defaultValue	string	—	The default value of the input
modelValue	string	—	The controlled value of the input
disabled	boolean	—	When `true`, prevents the user from interacting with the input.
readonly	boolean	—	When `true`, the input is read-only.
rootProps	BaseProps	—	Properties forwarded to the root element
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.
id	string	—	Id of the input element
autofocus	boolean	—	When `true`, the input is auto-focused.
autocomplete	'search' \| 'name' \| 'email' \| 'tel' \| 'url' \| 'on' \| 'off' \| 'username' \| 'current-password' \| 'new-password' \| 'one-time-code' \| 'given-name' \| 'family-name' \| 'organization' \| 'street-address' \| 'address-level2' \| 'postal-code' \| 'country' \| 'cc-name' \| 'cc-number' \| 'cc-exp' \| 'cc-csc' \| 'transaction-amount'	—	The autocomplete attribute of the input. Supports the HTML autofill tokens (including password-manager values such as `current-password` / `new-password`), in addition to the `on` / `off` switches.
maxlength	number	—	The maximum number of characters allowed in the input
minlength	number	—	The minimum number of characters allowed in the input
pattern	string	—	The pattern attribute of the input
placeholder	string	—	The placeholder of the input
type	InputTypeHTMLAttribute	—	The type of the input element.

Emits

Emit Name	Parameters	Description
update:modelValue	string	Emitted when the model value changes.

ComboboxItem

5 Props1 Emits

Props

Prop	Type	Default	Description
textValue	string	—	Text value.
value	string	—	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.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
select	SelectEvent<string>	Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`.

ComboboxItemIndicator

2 Props

Props

Prop	Type	Default	Description
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

ComboboxPortal

ComboboxRoot<M>

16 Props3 Emits

Props

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the Combobox. Can be bound with `v-model:open`.
defaultOpen	boolean	—	The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
resetSearchTermOnBlur	boolean	`true`	Whether to reset the searchTerm when the Combobox input blurred
resetSearchTermOnSelect	boolean	`true`	Whether to reset the searchTerm when the Combobox value is selected
openOnFocus	boolean	`false`	Whether to open the combobox when the input is focused
openOnClick	boolean	`false`	Whether to open the combobox when the input is clicked
ignoreFilter	boolean	—	When `true`, disable the default filters
clearable	boolean	—	Whether selected item can be cleared when `multiple` is false.
modelValue	(M extends true ? string[] : string)	—	The controlled value of the selected item(s). Use this when you need to control the state of the items. Can be bound with `v-model`
defaultValue	(M extends true ? string[] : string)	—	The default value of the selected item(s). Use this when you need to set the initial state of the items.
multiple	M	—	Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from `modelValue` and `defaultValue`.
disabled	boolean	—	When `true`, prevents the user from interacting with listbox
dir	Direction	—	The reading direction of the listbox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
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
required	boolean	—	When `true`, indicates that the user must set the value before the owning form can be submitted.

Emits

Emit Name	Parameters	Description
update:modelValue	M extends true ? string[] : string	—
highlight	CollectionItemData<ListboxCollectionItemData> \| undefined	Event handler when highlighted element changes.
update:open	boolean	Emitted when the open state changes.

ComboboxSeparator

2 Props

Props

Prop	Type	Default	Description
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

ComboboxTrigger

3 Props

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

ComboboxValue

5 Props

Props

Prop	Type	Default	Description
items	ComboboxOptionData[]	—	Items used to resolve selected labels.
placeholder	string	—	Placeholder rendered when no value is selected.
separator	string	`', '`	Separator used to join multiple selected labels.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

ComboboxViewport

1 Props

Props

Prop	Type	Default	Description
nonce	string	—	Nonce.

ComboboxVirtualizer

4 Props

Props

Prop	Type	Default	Description
options	string[]	—	List of items
overscan	number	—	Number of items rendered outside the visible area
estimateSize	number \| ((index: number) => number)	—	Estimated size (in px) of each item
textContent	((option: string) => string)	—	Text content for each item to achieve type-ahead feature

Notes

Architecture and benchmark differences

VeanUI builds combobox by reusing the listbox base plus Popper positioning: ComboboxRoot (selection state + useControllableState(open) + three-state filter) → ComboboxInput (role="combobox" + aria-autocomplete) → ComboboxTrigger → ComboboxContentImpl (DismissableLayer + FocusScope + bodyLock) → ComboboxItem → ListboxItem. The scv() recipe comboboxVariants declares 16 slots and 7 size variants. This mirrors reka-ui / shadcn combobox semantics, with virtual scrolling and the data-driven compact API as VeanUI differentiators.

Capability	VeanUI	reka-ui `Combobox`	shadcn `Combobox`	Ant Design `Select` (showSearch)
Aria/styled split	✅	✅	—	—
Type-to-filter + 3-state filter	✅	✅	✅	✅
combobox/listbox roles	✅	✅	✅	✅
Keyboard nav + typeahead	✅	✅	—	✅
Virtual scrolling	✅	✅	—	✅
Grouping + group labels	✅	✅	✅	✅
Cancel button (clear)	✅	✅	✅	✅
Empty state	✅	✅	—	—
Data-driven Compact API	✅	—	—	—
axe-clean (open state)	✅	—	✅	—

Cautions

The input filters options client-side; for remote/async filtering, disable built-in filtering or debounce inputValueChange yourself.
resetSearchTermOnBlur controls whether the search term is kept after blur — set it to match your UX (e.g. false keeps the typed term).
When the root is disabled, all items become unselectable — including items that declare their own disabled (unified rootDisabled || item.disabled guard).

FAQ

What is the difference between `SCombobox` and `SSelect`?

SCombobox filters options as the user types (role="combobox" + aria-autocomplete); SSelect is trigger-driven with typeahead only. Choose combobox when typing to search matters.

How do I enable virtual scrolling for large lists?

Add a ComboboxVirtualizer (or the equivalent compact flag) in the content; it activates an internal virtual list while preserving keyboard navigation.

How do I clear the selection or just the search term?

Pass clearable. With a selected value, the trigger shows an ✕ clear icon — clicking it deselects and emits an empty modelValue (undefined, or [] when multiple). Inside the popup, the cancel button clears only the search input, keeping the selection.

Why is a disabled item still selectable?

This was a real bug (a Vue withDefaults Boolean-prop defaulting issue) and is fixed. Disabled items now honor the unified rootDisabled || item.disabled guard, matching SSelect.

Quick jump

Related components

Combobox

Overview

Usage

Features

Demos

Basic

Group

Custom Styling

Value

API

Aria Layer

Combobox<M>

Props

Emits

Slots

ComboboxAnchor

Props

ComboboxArrow

ComboboxCancel

Props

ComboboxClear

Props

ComboboxCompact<M>

Props

Emits

Slots

ComboboxContent

Props

Emits

ComboboxEmpty

Props

ComboboxGroup

ComboboxGroupLabel

ComboboxInput

Props

Emits

ComboboxItem

Props

Emits

ComboboxItemIndicator

Props

ComboboxPortal

ComboboxRoot<M>

Props

Emits

ComboboxSeparator

Props

ComboboxTrigger

Props

ComboboxValue

Props

ComboboxViewport

Props

ComboboxVirtualizer

Props

Notes

Architecture and benchmark differences

Cautions

FAQ

What is the difference between SCombobox and SSelect?

How do I enable virtual scrolling for large lists?

How do I clear the selection or just the search term?

Why is a disabled item still selectable?

Changelog

v0.31.0

Optimization

Refactor

v0.16.0

Optimization

Optimization

v0.15.1

Fix

v0.15.0

Optimization

Refactor

Refactor

Optimization

What is the difference between `SCombobox` and `SSelect`?