120k
New

Combobox

PreviousNext

Autocomplete input with a list of suggestions.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/combobox

Usage

<script setup lang="ts">
import { ref } from "vue"
 
import {
  Combobox,
  ComboboxAnchor,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
} from "@/components/ui/combobox"
</script>
<template>
  <Combobox v-model="value" :display-value="(v) => v as string">
    <ComboboxAnchor>
      <ComboboxInput placeholder="Select a framework" />
    </ComboboxAnchor>
    <ComboboxList>
      <ComboboxEmpty>No items found.</ComboboxEmpty>
      <ComboboxGroup>
        <ComboboxItem
          v-for="framework in frameworks"
          :key="framework"
          :value="framework"
        >
          {{ framework }}
          <ComboboxItemIndicator />
        </ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </Combobox>
</template>

Examples

Basic

A simple combobox with a list of frameworks.

Multiple

A combobox with multiple selection using multiple.

Clear Button

Use the reset-model-value-on-clear prop with ComboboxCancel to show a clear button.

Groups

Use ComboboxGroup with the heading prop to group items.

Custom Items

You can render a custom component inside ComboboxItem.

Invalid

Use aria-invalid on ComboboxInput to mark the combobox as invalid.

Disabled

Use the disabled prop to disable the combobox.

Auto Highlight

Use the open-on-focus prop to automatically open the list when the input is focused.

You can trigger the combobox from a button by using ComboboxTrigger inside ComboboxAnchor.

Input Group

You can add an addon to the combobox by using the InputGroupAddon component alongside ComboboxInput.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Reka UI documentation for more information.