◇

Combobox

16 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  ComboboxAnchor,
  ComboboxArrow,
  ComboboxCancel,
  ComboboxContent,
  ComboboxContentImpl,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxLabel,
  ComboboxPortal,
  ComboboxRoot,
  ComboboxSeparator,
  ComboboxTrigger,
  ComboboxViewport,
} from '@robonen/primitives/combobox';

<ComboboxAnchor>
  <ComboboxArrow />
  <ComboboxCancel />
  <ComboboxContent />
  <ComboboxContentImpl />
  <ComboboxEmpty />
  <ComboboxGroup />
  <ComboboxInput />
  <ComboboxItem />
  <ComboboxItemIndicator />
  <ComboboxLabel />
  <ComboboxPortal />
  <ComboboxRoot />
  <ComboboxSeparator />
  <ComboboxTrigger />
  <ComboboxViewport />
</ComboboxAnchor>

API Reference

ComboboxAnchor

Anchor

No props or events — renders its element and forwards attributes.

ComboboxArrow

Arrow

No props or events — renders its element and forwards attributes.

ComboboxCancel

Cancel

No props or events — renders its element and forwards attributes.

ComboboxContent

Content

No props or events — renders its element and forwards attributes.

ComboboxContentImpl

ContentImpl

Prop	Type	Default	Description
`position`?	`'inline' \| 'popper'`	`'popper'`	Position strategy.
`disableOutsidePointerEvents`?	`boolean`	`false`	Block outside pointer events.

ComboboxEmpty

Empty

Prop	Type	Default	Description
`always`?	`boolean`	—	Render even when items exist but none are filtered out.

ComboboxGroup

Group

No props or events — renders its element and forwards attributes.

ComboboxInput

Input

Prop	Type	Default	Description
`disabled`?	`boolean`	—	Disable the input.
`autoFocus`?	`boolean`	—	Focus the input on mount.
`openOnFocus`?	`boolean`	—	Open the combobox when the input is focused.
`openOnClick`?	`boolean`	—	Open the combobox when the input is clicked.

ComboboxItem

Item

Prop	Type	Default	Description
`value`	`T`	—	Item value. Selected/registered identity.
`textValue`?	`string`	—	Optional explicit text for filter + typeahead.
`disabled`?	`boolean`	—	Disable this item.

ComboboxItemIndicator

ItemIndicator

No props or events — renders its element and forwards attributes.

ComboboxLabel

Label

No props or events — renders its element and forwards attributes.

ComboboxPortal

Portal

No props or events — renders its element and forwards attributes.

ComboboxRoot

Root

Prop	Type	Default	Description
`modelValue`?	`T \| T[]`	—	Controlled selected value. Use `v-model`.
`defaultValue`?	`T \| T[]`	—	Uncontrolled initial value.
`defaultOpen`?	`boolean`	—	Uncontrolled default open state.
`multiple`?	`boolean`	—	Allow selecting multiple values.
`dir`?	`Direction`	—	Reading direction. Falls back to `ConfigProvider`.
`disabled`?	`boolean`	—	Disable the whole combobox.
`required`?	`boolean`	—	Mark as required for native form validation.
`name`?	`string`	—	Native input name for form submission.
`resetSearchTermOnBlur`?	`boolean`	`true`	Reset the search term when the input is blurred.
`resetSearchTermOnSelect`?	`boolean`	`true`	Reset the search term when a value is selected (single mode).
`ignoreFilter`?	`boolean`	—	Skip the built-in filter; render every item regardless of search term.
`filterFunction`?	`ComboboxFilterFunction`	—	Custom filter implementation. Overrides the default substring match.
`displayValue`?	`(value: T \| T[] \| undefined) => string`	—	Map the current model value to the input's display value.
`by`?	`string \| ((a: T, b: T) => boolean)`	—	Compare values by key, or via a custom comparator.

ComboboxSeparator

Separator

No props or events — renders its element and forwards attributes.

ComboboxTrigger

Trigger

Prop	Type	Default	Description
`disabled`?	`boolean`	—	Disable the trigger independently from the root.

ComboboxViewport

Viewport

No props or events — renders its element and forwards attributes.