Docs
Combobox Primitive

Combobox Primitive

An unstyled combobox component. Input field with autocomplete & autosuggest functionalities.

Docs

About

The <ComboboxPrimitive /> component is built on top of cmdk, wrapping the library to deliver a more consistent API that aligns with Radix UI conventions.

Installation

npx shadcn@latest add https://ui-x.junwen-k.dev/r/combobox-primitive.json

Anatomy

import * as ComboboxPrimitive from "@/components/ui/combobox-primitive"
 
export default () => (
  <ComboboxPrimitive.Root>
    <ComboboxPrimitive.TagGroup>
      <ComboboxPrimitive.TagGroupItem>
        <ComboboxPrimitive.TagGroupItemRemove />
      </ComboboxPrimitive.TagGroupItem>
    </ComboboxPrimitive.TagGroup>
 
    <ComboboxPrimitive.Input />
    <ComboboxPrimitive.Clear />
    <ComboboxPrimitive.Anchor />
    <ComboboxPrimitive.Trigger />
 
    <ComboboxPrimitive.Portal>
      <ComboboxPrimitive.Content>
        <ComboboxPrimitive.Empty />
        <ComboboxPrimitive.Loading />
 
        <ComboboxPrimitive.Item>
          <ComboboxPrimitive.ItemIndicator />
        </ComboboxPrimitive.Item>
 
        <ComboboxPrimitive.Group>
          <ComboboxPrimitive.Item>
            <ComboboxPrimitive.ItemIndicator />
          </ComboboxPrimitive.Item>
        </ComboboxPrimitive.Group>
 
        <ComboboxPrimitive.Separator />
      </ComboboxPrimitive.Content>
    </ComboboxPrimitive.Portal>
  </ComboboxPrimitive.Root>
)

Examples

Combobox

Multi Select

Multiple

AppleBananaBlueberryGrapesPineapple
ChangelogDate Time Field