combobox

Combobox

Searchable single-choice list behind a trigger, with headed groups and an empty state; the list is as wide as its trigger, and the trigger joins a Field as its control.

States: Default, Focus, Disabled, Invalid

Parts

Part	File	Does
Combobox	Combobox.vue	Groups all parts of the combobox, which lets the user search and pick an option.
ComboboxAnchor	ComboboxAnchor.vue	Marks where the option list attaches, wrapping the input and trigger.
ComboboxEmpty	ComboboxEmpty.vue	Shows a message when no option matches the search.
ComboboxGroup	ComboboxGroup.vue	Groups related options in the combobox list.
ComboboxInput	ComboboxInput.vue	Lets the user type to filter the combobox options.
ComboboxItem	ComboboxItem.vue	Holds one option the user can pick from the combobox.
ComboboxItemIndicator	ComboboxItemIndicator.vue	Marks an option as selected in the combobox list.
ComboboxList	ComboboxList.vue	Holds the options the combobox offers while it is open.
ComboboxSeparator	ComboboxSeparator.vue	Separates groups of options in the combobox list; hidden while a search filters the list.
ComboboxTrigger	ComboboxTrigger.vue	Shows the chosen option and opens the combobox list when pressed.
ComboboxViewport	ComboboxViewport.vue	Scrolls the options when the combobox list is longer than the space available.

Anatomy

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

Styling

Part	Recipe
ComboboxAnchor	combobox-anchor
ComboboxEmpty	combobox-empty
ComboboxGroup	combobox-label
ComboboxInput	combobox-input
ComboboxInput	combobox-search
ComboboxItem	combobox-item
ComboboxItemIndicator	combobox-item-indicator
ComboboxList	combobox-content
ComboboxSeparator	combobox-separator
ComboboxTrigger	combobox-trigger
ComboboxTrigger	combobox-chevron
ComboboxViewport	combobox-viewport

Install

Writes 13 files into components/ui/combobox/. For agents, npx @frontic/ui docs combobox prints this reference as markdown; the MCP server serves the same.

npm packages: @lucide/vue; @vueuse/core; reka-ui

API reference

Combobox Combobox.vue

Groups all parts of the combobox, which lets the user search and pick an option.

Prop	Type	Default
open	boolean	—

defaultOpen	boolean	false

resetSearchTermOnBlur	boolean	true

resetSearchTermOnSelect	boolean	true

openOnFocus	boolean	false

openOnClick	boolean	false

ignoreFilter	boolean	false

resetModelValueOnClear	boolean	false

unmountOnHide	boolean	true

multiple	boolean	false

disabled	boolean	false

dir	Direction	—

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
modelValue	AcceptableValue \| AcceptableValue[]	—

defaultValue	AcceptableValue \| AcceptableValue[]	—

name	string	—

required	boolean	false

highlightOnHover	boolean	true

loop	boolean	false

by	string \| ((a: AcceptableValue, b: AcceptableValue) => boolean)	—

Event	Payload
update:modelValue	value: AcceptableValue

update:open	value: boolean

highlight	payload: { ref: HTMLElement; value: AcceptableValue; } \| undefined

Slot	Slot props
default	{ open: boolean; modelValue: AcceptableValue \| AcceptableValue[]; }

Parts

Anatomy

Styling

Install

API reference

Combobox Combobox.vue

ComboboxAnchor ComboboxAnchor.vue

ComboboxEmpty ComboboxEmpty.vue

ComboboxGroup ComboboxGroup.vue

ComboboxInput ComboboxInput.vue

ComboboxItem ComboboxItem.vue

ComboboxItemIndicator ComboboxItemIndicator.vue

ComboboxList ComboboxList.vue

ComboboxSeparator ComboboxSeparator.vue

ComboboxTrigger ComboboxTrigger.vue

ComboboxViewport ComboboxViewport.vue