Combobox

A single input field that combines the functionality of a select and input.

Anatomy

To set up the combobox correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Combobox component in your project. Let’s take a look at the most basic example

Advanced Customization

Extended example that shows usage with complex item objects, including disabled state for certain options.

TypeScript Caveats in Vue

Under the hood for React and Solid frameworks, we supply a complex prop type with a generic so that the type of the items prop matches the param type in the function signatures for props such as the isItemDisabled prop, say. (See the api reference table below) Unfortunately, generic typing is not supported in Vue for components that contain props with slots and/or emits. Therefore, you will not expect updated typing in this way.

If you have a solution or a workaround to this problem, we would love the contribution and request that you open a Github idea discussion to let us know a PoC you have to share!

API Reference

Item

PropTypeDefault
asChild
boolean
item
any

Root

PropTypeDefault
items
T[] | readonly T[]
allowCustomValue
boolean
asChild
boolean
autoFocus
boolean
closeOnSelect
boolean
defaultValue
string[]
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
form
string
getRootNode
() => ShadowRoot | Node | Document
highlightedValue
string
id
string
ids
Partial<{ root: string label: string control: string input: string content: string trigger: string clearTrigger: string item(id: string, index?: number | undefined): string positioner: string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>
inputBehavior
'none' | 'autohighlight' | 'autocomplete'
inputValue
string
invalid
boolean
isItemDisabled
(item: T) => boolean
itemToString
(item: T) => string
itemToValue
(item: T) => string
lazyMount
booleanfalse
loop
boolean
multiple
boolean
name
string
onExitComplete
() => void
onFocusOutside
(event: FocusOutsideEvent) => void
onHighlightChange
(details: HighlightChangeDetails<T>) => void
onInputValueChange
(details: InputValueChangeDetails) => void
onInteractOutside
(event: InteractOutsideEvent) => void
onOpenChange
(details: OpenChangeDetails) => void
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
onValueChange
(details: ValueChangeDetails<T>) => void
openOnClick
boolean
placeholder
string
positioning
PositioningOptions
present
boolean
readOnly
boolean
selectionBehavior
'replace' | 'clear' | 'preserve'
selectOnBlur
boolean
translations
IntlTranslations
unmountOnExit
booleanfalse
value
string[]

Input

PropTypeDefault
asChild
boolean

Label

PropTypeDefault
asChild
boolean

Content

PropTypeDefault
asChild
boolean

Control

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean

ItemText

PropTypeDefault
asChild
boolean

ItemGroup

PropTypeDefault
id
string
asChild
boolean

Positioner

PropTypeDefault
asChild
boolean

ClearTrigger

PropTypeDefault
asChild
boolean

ItemIndicator

PropTypeDefault
asChild
boolean

ItemGroupLabel

PropTypeDefault
htmlFor
string
asChild
boolean