Combobox

Choose from a list of suggested values with full keyboard support.

<script setup lang="ts">
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'akar';
import './styles.css';

const options = [
  {
    name: 'Fruit',
    children: [
      { name: 'Apple' },
      { name: 'Banana' },
      { name: 'Orange' },
      { name: 'Honeydew' },
      { name: 'Grapes' },
      { name: 'Watermelon' },
      { name: 'Cantaloupe' },
      { name: 'Pear' },
    ],
  },
  {
    name: 'Vegetable',
    children: [
      { name: 'Cabbage' },
      { name: 'Broccoli' },
      { name: 'Carrots' },
      { name: 'Lettuce' },
      { name: 'Spinach' },
      { name: 'Bok Choy' },
      { name: 'Cauliflower' },
      { name: 'Potatoes' },
    ],
  },
];
</script>

<template>
  <div class="akar-demo akar-demo-Combobox">
    <ComboboxRoot class="ComboboxRoot">
      <ComboboxAnchor class="ComboboxAnchor">
        <ComboboxInput
          class="ComboboxInput"
          placeholder="Placeholder..."
        />
        <ComboboxTrigger>
          <PIcon
            name="i-lucide-chevron-down"
            class="ComboboxIcon"
          />
        </ComboboxTrigger>
      </ComboboxAnchor>

      <ComboboxContent class="ComboboxContent">
        <ComboboxViewport class="ComboboxViewport">
          <ComboboxEmpty class="ComboboxEmpty" />

          <template
            v-for="(group, index) in options"
            :key="group.name"
          >
            <ComboboxGroup v-if="group.children.length">
              <ComboboxSeparator
                v-if="index !== 0"
                class="ComboboxSeparator"
              />

              <ComboboxLabel class="ComboboxLabel">
                {{ group.name }}
              </ComboboxLabel>

              <ComboboxItem
                v-for="option in group.children"
                :key="option.name"
                :value="option.name"
                class="ComboboxItem"
              >
                <ComboboxItemIndicator
                  class="ComboboxItemIndicator"
                >
                  <PIcon name="i-lucide-check" />
                </ComboboxItemIndicator>
                <span>
                  {{ option }}
                </span>
              </ComboboxItem>
            </ComboboxGroup>
          </template>
        </ComboboxViewport>
      </ComboboxContent>
    </ComboboxRoot>
  </div>
</template>

@import '../_colors/black-alpha.css';
@import '../_colors/mauve.css';
@import '../_colors/grass.css';

@scope (.akar-demo-Combobox) {
  /* reset */
  button,
  input {
    all: unset;
  }

  .ComboboxRoot {
    position: relative;
  }

  .ComboboxAnchor {
    display: inline-flex;
    align-items: center;
    justify-content: between;
    font-size: 13px;
    line-height: 1;
    height: 35px;
    padding: 0 15px;
    gap: 5px;
    background-color: white;
    color: var(--grass-11);
    border-radius: 4px;
    box-shadow: 0 2px 10px var(--black-a7);
  }
  .ComboboxAnchor:hover {
    background-color: var(--mauve-3);
  }

  .ComboboxInput {
    height: 100%;
    background-color: transparent;
    color: var(--grass-11);
  }
  .ComboboxInput[data-placeholder] {
    color: var(--grass-9);
  }

  .ComboboxIcon {
    width: 16px;
    height: 16px;
    color: var(--grass-11);
  }

  .ComboboxContent {
    z-index: 10;
    width: 100%;
    position: absolute;
    overflow: hidden;
    background-color: white;
    border-radius: 6px;
    margin-top: 8px;
    box-shadow:
      0px 10px 38px -10px rgba(22, 23, 24, 0.35),
      0px 10px 20px -15px rgba(22, 23, 24, 0.2);
  }

  .ComboboxViewport {
    padding: 5px;
  }

  .ComboboxEmpty {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--mauve-11);
  }

  .ComboboxItem {
    font-size: 13px;
    line-height: 1;
    color: var(--grass-11);
    border-radius: 3px;
    display: flex;
    align-items: center;
    height: 25px;
    padding: 0 35px 0 25px;
    position: relative;
    user-combobox: none;
  }
  .ComboboxItem[data-disabled] {
    color: var(--mauve-8);
    pointer-events: none;
  }
  .ComboboxItem[data-highlighted] {
    outline: none;
    background-color: var(--grass-9);
    color: var(--grass-1);
  }

  .ComboboxLabel {
    padding: 0 25px;
    font-size: 12px;
    line-height: 25px;
    color: var(--mauve-11);
  }

  .ComboboxSeparator {
    height: 1px;
    background-color: var(--grass-6);
    margin: 5px;
  }

  .ComboboxItemIndicator {
    position: absolute;
    left: 0;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

Features

Can be controlled or uncontrolled.
Offers 2 positioning modes.
Supports items, labels, groups of items.
Focus is fully managed.
Full keyboard navigation.
Supports custom placeholder.
Supports Right to Left direction.

Installation

Install the component from your command line.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import {
  ComboboxAnchor,
  ComboboxArrow,
  ComboboxCancel,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxLabel,
  ComboboxPortal,
  ComboboxRoot,
  ComboboxSeparator,
  ComboboxTrigger,
  ComboboxViewport,
} from 'akar';
</script>

<template>
  <ComboboxRoot>
    <ComboboxAnchor>
      <ComboboxInput />
      <ComboboxTrigger />
      <ComboboxCancel />
    </ComboboxAnchor>

    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxViewport>
          <ComboboxEmpty />

          <ComboboxItem>
            <ComboboxItemIndicator />
          </ComboboxItem>

          <ComboboxSeparator />

          <ComboboxGroup>
            <ComboboxLabel />
            <ComboboxItem>
              <ComboboxItemIndicator />
            </ComboboxItem>
          </ComboboxGroup>
        </ComboboxViewport>

        <ComboboxArrow />
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`by`		`string \| ((a: T, b: T) => boolean)` Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
`defaultOpen`		`boolean` The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
`defaultValue`		`T \| T[]` The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox
`dir`		`"ltr" \| "rtl"` The reading direction of the listbox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`highlightOnHover`	`true`	`boolean` When `true`, hover over item will trigger highlight
`ignoreFilter`		`boolean` When `true`, disable the default filters
`modelValue`		`T \| T[]` The controlled value of the listbox. Can be binded with `v-model`.
`multiple`		`boolean` Whether multiple options can be selected or not.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`open`		`boolean` The controlled open state of the Combobox. Can be binded with `v-model:open`.
`openOnClick`	`false`	`boolean` Whether to open the combobox when the input is clicked
`openOnFocus`	`false`	`boolean` Whether to open the combobox when the input is focused
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`resetModelValueOnClear`	`false`	`boolean` When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
`resetSearchTermOnBlur`	`true`	`boolean` Whether to reset the searchTerm when the Combobox input blurred
`resetSearchTermOnSelect`	`true`	`boolean` Whether to reset the searchTerm when the Combobox value is selected
`unmountOnHide`	`true`	`boolean` When set to `false`, the Combobox content will not be unmounted when closed, but instead hidden with CSS. Useful when you want to improve performance by not remounting the content on every open.

Event	Payload
`highlight`	`payload: { ref: HTMLElement; value: T; }` Event handler when highlighted element changes.
`update:modelValue`	`value: T` Event handler called when the value changes.
`update:open`	`value: boolean` Event handler called when the open state of the combobox changes.

Slot (default)	Payload
`open`	`boolean` Current open state
`modelValue`	`T \| T[]` Current active value

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`reference`		`ReferenceElement` The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.

Prop	Default	Type
`as`	`"input"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`autoFocus`		`boolean` Focus on element when mounted.
`disabled`		`boolean` When `true`, prevents the user from interacting with item
`displayValue`		`((val: any) => string)` The display value of input for selected item. Does not work with `multiple`.
`modelValue`		`string` The controlled value of the filter. Can be binded with v-model.

Event	Payload
`update:modelValue`	`string`

Prop	Default	Type
`as`	`"button"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, prevents the user from interacting with item

Data attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Prop	Default	Type
`as`	`"button"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Prop	Default	Type
`defer`		`boolean` Defer the resolving of a Teleport target until other parts of the application have mounted (requires Vue 3.5.0+) reference
`disabled`		`boolean` Disable teleport and render the component inline reference
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`to`		`string \| HTMLElement` Vue native teleport component prop `:to` reference

Prop	Default	Type
`align`	`"center"`	`"start" \| "center" \| "end"` The preferred alignment against the trigger. May change when collisions occur.
`alignFlip`	`true`	`boolean` Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
`alignOffset`	`0`	`number` An offset in pixels from the `start` or `end` alignment options.
`arrowPadding`	`0`	`number` 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.
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`avoidCollisions`	`true`	`boolean` When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
`bodyLock`		`boolean` The document.body will be lock, and scrolling will be disabled.
`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`	`0`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>` 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: .
`dir`		`"ltr" \| "rtl"` The reading direction of the popper content when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`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.
`disableUpdateOnLayoutShift`	`false`	`boolean` Whether to disable the update position for the content when the layout shifted.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`hideShiftedArrow`	`true`	`boolean` When `true`, hides the arrow when it cannot be centered to the reference element.
`hideWhenDetached`	`false`	`boolean` Whether to hide the content when the trigger becomes fully occluded.
`hideWhenEmpty`	`false`	`boolean` When `true`, hides the content when there are no items matching the filter.
`memoDependencies`		`unknown[]` Reactive dependencies that should invalidate the memoized content subtree.
`position`		`"inline" \| "popper"` The positioning mode to use, `inline` is the default and you can control the position using CSS. `popper` positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
`positionStrategy`		`"fixed" \| "absolute"` The type of CSS position property to use.
`present`		`boolean` Whether this kept-mounted content is currently visible.
`prioritizePosition`	`false`	`boolean` 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.
`side`	`"bottom"`	`"top" \| "right" \| "bottom" \| "left"` The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
`sideFlip`	`true`	`boolean` Flip to the opposite side when colliding with boundary.
`sideOffset`	`0`	`number` The distance in pixels from the trigger.
`sticky`	`"partial"`	`"partial" \| "always"` 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.
`updatePositionStrategy`	`'optimized'`	`"always" \| "optimized"` Strategy to update the position of the floating element on every animation frame.

Event	Payload
`escapeKeyDown`	`event: KeyboardEvent` Event handler called when the escape key is down. Can be prevented.
`focusOutside`	`event: FocusOutsideEvent` Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
`interactOutside`	`event: 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.
`pointerDownOutside`	`event: PointerDownOutsideEvent` Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.

Data attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`
`[data-empty]`	Present when there are no items matching the filter

CSS variable	Description
`--akar-combobox-content-transform-origin`	The `transform-origin` computed from the content and arrow positions/offsets. Only present when `position="popper"`.
`--akar-combobox-content-available-width`	The remaining width between the trigger and the boundary edge. Only present when `position="popper"`.
`--akar-combobox-content-available-height`	The remaining height between the trigger and the boundary edge. Only present when `position="popper"`.
`--akar-combobox-trigger-width`	The width of the trigger. Only present when `position="popper"`.
`--akar-combobox-trigger-height`	The height of the trigger. Only present when `position="popper"`.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`nonce`		`string` Will add `nonce` attribute to the style tag which can be used by Content Security Policy. If omitted, inherits globally from `ConfigProvider`.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, prevents the user from interacting with the item.
`textValue`		`string` 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.
`value*`		`T` The value given as data when submitted with a `name`.

Event	Payload
`select`	`event: SelectEvent<T>` Event handler called when the selecting item. It can be prevented by calling `event.preventDefault`.

Slot (default)	Payload
`selected`	`boolean` Whether the item is currently selected

Data attribute	Value
`[data-state]`	`"checked" \| "unchecked"`
`[data-highlighted]`	Present when highlighted
`[data-disabled]`	Present when disabled

Prop	Default	Type
`as`	`"span"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`for`		`string`

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

An optional arrow element to render alongside the content. This can be used to help visually link the trigger with the ComboboxContent. Must be rendered inside ComboboxContent. Only available when position is set to popper.

Prop	Default	Type
`as`	`"svg"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`height`	`5`	`number` The height of the arrow in pixels.
`rounded`	`false`	`boolean` When `true`, render the rounded version of arrow. Do not work with `as`/`asChild`
`width`	`10`	`number` The width of the arrow in pixels.

ComboboxArrow.vue source

Virtualizer

Virtual container to achieve list virtualization.

Combobox items must be filtered manually before passing them over to the virtualizer. See example below.

See the virtualization guide for more general info on virtualization.

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

Slot (default)	Payload
`option`	`T`
`virtualizer`	`Virtualizer<HTMLElement, Element>`
`virtualItem`	`VirtualItem`

ComboboxVirtualizer.vue source

Examples

Binding objects as values

Unlike native HTML form controls which only allow you to provide strings as values, Akar supports binding complex objects as well.

Make sure to set the displayValue prop to set the input value on item selection.

<script setup lang="ts">
import { ComboboxContent, ComboboxInput, ComboboxItem, ComboboxPortal, ComboboxRoot } from 'akar'
import { ref } from 'vue'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]
const selectedPeople = ref(people[0])
</script>

<template>
  <ComboboxRoot v-model="selectedPeople">
    <ComboboxInput :display-value="(v) => v.name" />
    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxItem
          v-for="person in people"
          :key="person.id"
          :value="person"
          :disabled="person.unavailable"
        >
          {{ person.name }}
        </ComboboxItem>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

Selecting multiple values

The Combobox component allows you to select multiple values. You can enable this by providing an array of values instead of a single value.

<script setup lang="ts">
import { ComboboxRoot } from 'akar'
import { ref } from 'vue'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]
const selectedPeople = ref([people[0], people[1]])
</script>

<template>
  <ComboboxRoot
    v-model="selectedPeople"
    multiple
  >
    …
  </ComboboxRoot>
</template>

Custom filtering

Internally, ComboboxRoot will filter the item based on the rendered text.

However, you may also provide your own custom filtering logic together with setting ignoreFilter="true".

<script setup lang="ts">
import { ComboboxContent, ComboboxInput, ComboboxItem, ComboboxPortal, ComboboxRoot, useFilter } from 'akar'
import { ref } from 'vue'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]
const selectedPeople = ref(people[0])
const searchTerm = ref('')

const { startsWith } = useFilter({ sensitivity: 'base' })
const filteredPeople = computed(() => people.filter(p => startsWith(p.name, searchTerm.value)))
</script>

<template>
  <ComboboxRoot
    v-model="selectedPeople"
    :ignore-filter="true"
  >
    <ComboboxInput v-model="searchTerm" />
    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxItem
          v-for="person in filteredPeople"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </ComboboxItem>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

Custom label

By default the Combobox will use the input contents as the label for screenreaders. If you'd like more control over what is announced to assistive technologies, use the Label component.

<script setup lang="ts">
import { ComboboxInput, ComboboxRoot, Label } from 'akar'
import { ref } from 'vue'
</script>

<template>
  <ComboboxRoot v-model="selectedPeople">
    <Label for="person">Person: </Label>
    <ComboboxInput
      id="person"
      placeholder="Select a person"
    />
    …
  </ComboboxRoot>
</template>

With disabled items

You can add special styles to disabled items via the data-disabled attribute.

<script setup lang="ts">
import {
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxPortal,
  ComboboxRoot,
} from 'akar'
import { ref } from 'vue'
</script>

<template>
  <ComboboxRoot>
    <ComboboxInput />
    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxItem
          class="ComboboxItem"
          disabled
        >
          …
        </ComboboxItem>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

/* styles.css */
.ComboboxItem[data-disabled] {
  color: "gainsboro";
}

With separators

Use the Separator part to add a separator between items.

<script setup lang="ts">
import {
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxPortal,
  ComboboxRoot,
  ComboboxSeparator
} from 'akar'
import { ref } from 'vue'
</script>

<template>
  <ComboboxRoot>
    <ComboboxInput />
    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxItem>…</ComboboxItem>
        <ComboboxItem>…</ComboboxItem>
        <ComboboxItem>…</ComboboxItem>
        <ComboboxSeparator />
        <ComboboxItem>…</ComboboxItem>
        <ComboboxItem>…</ComboboxItem>
        <ComboboxItem>…</ComboboxItem>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

With grouped items

Use the Group and Label parts to group items in a section.

<script setup lang="ts">
import {
  ComboboxContent,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxPortal,
  ComboboxRoot
} from 'akar'
import { ref } from 'vue'
</script>

<template>
  <ComboboxRoot>
    <ComboboxInput />
    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxGroup>
          <ComboboxLabel>Label</ComboboxLabel>
          <ComboboxItem>…</ComboboxItem>
          <ComboboxItem>…</ComboboxItem>
          <ComboboxItem>…</ComboboxItem>
        </ComboboxGroup>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

With complex items

You can use custom content in your items.

<script setup lang="ts">
import {
  ComboboxContent,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxLabel,
  ComboboxPortal,
  ComboboxRoot
} from 'akar'
import { ref } from 'vue'
</script>

<template>
  <ComboboxRoot>
    <ComboboxInput />
    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxItem>
          <img src="…">
          Adolfo Hess
          <ComboboxItemIndicator />
        </ComboboxItem>
        …
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

Prevent select behavior

By default, selecting ComboboxItem would close the content, and update the modelValue with the provided value. You can prevent this behavior by preventing default @select.prevent.

<script setup lang="ts">
import { ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot } from 'akar'
import { ref } from 'vue'
</script>

<template>
  <ComboboxRoot>
    <ComboboxInput />
    <ComboboxPortal>
      <ComboboxContent>
        <ComboboxItem @select.prevent>
          Item A
        </ComboboxItem>
        …
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

Virtualized combobox with working filtering

Combobox items must be filtered manually before passing them over to the virtualizer.

See the virtualization guide for more general info on virtualization.

<script setup lang="ts">
import { ComboboxContent, ComboboxInput, ComboboxItem, ComboboxPortal, ComboboxRoot, ComboboxViewport, ComboboxVirtualizer, useFilter } from 'akar'
import { computed, ref } from 'vue'

const people = Array.from({ length: 100000 }).map((_, id) => ({ id, name: `Person #${id}` }))
const selectedPeople = ref(people[0])
const searchTerm = ref('')

const { contains } = useFilter({ sensitivity: 'base' })
const filteredPeople = computed(() => people.filter(p => contains(p.name, searchTerm.value)))
</script>

<template>
  <ComboboxRoot v-model="selectedPeople">
    <ComboboxInput v-model="searchTerm" />
    <ComboboxPortal>
      <ComboboxContent class="max-h-[40vh] overflow-hidden">
        <ComboboxViewport>
          <ComboboxVirtualizer
            v-slot="{ option }"
            :options="filteredPeople"
            :text-content="(x) => x.name"
            :estimate-size="24"
          >
            <ComboboxItem :value="option">
              {{ option.name }}
            </ComboboxItem>
          </ComboboxVirtualizer>
        </ComboboxViewport>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

Accessibility

Adheres to the Combobox WAI-ARIA design pattern.

See the W3C Combobox Autocomplete List example for more information.

Keyboard Interactions

Key	Description

Color Swatch Picker

A component that allows users to select from a set of predefined colors, often used for themes or branding.

Context Menu

Displays a menu located at the pointer, triggered by a right-click or a long-press.