Combobox

An input combined with a list of predefined items to select.

Select a fruit

"use client";

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
  { label: "Blueberry", value: "blueberry" },
  { label: "Raspberry", value: "raspberry" },
  { label: "Blackberry", value: "blackberry" },
  { label: "Cherry", value: "cherry" },
  { label: "Papaya", value: "papaya" },
  { label: "Cantaloupe", value: "cantaloupe" },
  { label: "Honeydew", value: "honeydew" },
  { label: "Lemon", value: "lemon" },
  { label: "Lime", value: "lime" },
  { label: "Coconut", value: "coconut" },
  { label: "Pomegranate", value: "pomegranate" },
  { label: "Fig", value: "fig" },
  { label: "Date", value: "date" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={items}>
      <div className="flex flex-col gap-2">
        <label htmlFor="fruit-combobox">Select a fruit</label>
        <ComboboxInput
          id="fruit-combobox"
          aria-label="Select a item"
          placeholder="Select a item…"
          inputGroupProps={{ className: "w-fit" }}
        />
      </div>
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Installation

components/ui/combobox.tsx

"use client";

import { createContext, useContext, useRef } from "react";

import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
import { IconSelector, IconX } from "@tabler/icons-react";

import { cn } from "@/lib/cn";
import { ScrollArea } from "@/components/ui/scroll-area";

const ComboboxContext = createContext<{ chipsRef: React.RefObject<HTMLDivElement | null> | null }>({
  chipsRef: null,
});

export function Combobox(props: React.ComponentProps<typeof ComboboxPrimitive.Root>) {
  const chipsRef = useRef<HTMLDivElement | null>(null);

  return (
    <ComboboxContext.Provider value={{ chipsRef }}>
      <ComboboxPrimitive.Root {...props} />
    </ComboboxContext.Provider>
  );
}

export function ComboboxTrigger(props: React.ComponentProps<typeof ComboboxPrimitive.Trigger>) {
  return <ComboboxPrimitive.Trigger data-slot="combobox-trigger" {...props} />;
}

export function ComboboxClear({
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Clear>) {
  return (
    <ComboboxPrimitive.Clear
      data-slot="combobox-clear"
      className={cn(
        "absolute end-0.5 top-1/2 inline-flex size-7 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full outline-none transition-[color,opacity] not-data-disabled:hover:bg-accent hover:opacity-100 data-disabled:cursor-default [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        className
      )}
      {...props}
    />
  );
}

export const ComboboxValue = ComboboxPrimitive.Value;

export function ComboboxInput({
  className,
  showTrigger = true,
  showClear = false,
  startAddon,
  size = "default",
  inputGroupProps,
  triggerProps: { className: triggerClassName, ...triggerProps } = {},
  clearProps: { className: clearClassName, ...clearProps } = {},
  ...props
}: Omit<React.ComponentProps<typeof ComboboxPrimitive.Input>, "size"> & {
  showTrigger?: boolean;
  showClear?: boolean;
  startAddon?: React.ReactNode;
  size?: "xs" | "sm" | "default" | "lg" | "xl" | number;
  inputGroupProps?: React.ComponentProps<typeof ComboboxInputGroup>;
  triggerProps?: React.ComponentProps<typeof ComboboxTrigger>;
  clearProps?: React.ComponentProps<typeof ComboboxClear>;
}) {
  return (
    <ComboboxInputGroup {...inputGroupProps}>
      {startAddon && (
        <div
          aria-hidden="true"
          data-slot="combobox-start-addon"
          className={cn(
            "pointer-events-none absolute inset-y-px start-px z-10 flex items-center justify-center ps-2 [&_svg:not([class*='size-'])]:size-4",
            size === "xs" && "ps-1.5 [&_svg:not([class*='size-'])]:size-3",
            size === "sm" && "ps-1.75 [&_svg:not([class*='size-'])]:size-3.5",
            size === "xl" && "ps-2.5 [&_svg:not([class*='size-'])]:size-4.5"
          )}
        >
          {startAddon}
        </div>
      )}
      <ComboboxPrimitive.Input
        data-slot="combobox-input"
        data-size={typeof size === "string" ? size : undefined}
        size={typeof size === "number" ? size : undefined}
        className={cn(
          "h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm shadow-xs outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground dark:bg-input/30",
          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
          "aria-invalid:border-danger aria-invalid:ring-danger/30",
          size === "xs" && "h-6 rounded-sm px-2 text-xs focus-visible:ring-2",
          size === "sm" && "h-7 rounded-md px-2 text-[0.8125rem] focus-visible:ring-2",
          size === "lg" && "h-9",
          size === "xl" && "h-10 px-3 text-base",
          startAddon && "ps-7.5 data-[size=sm]:ps-6 data-[size=xl]:ps-8.5 data-[size=xs]:ps-5.5",
          size === "xs" && "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:pe-6",
          size === "sm" && "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:pe-7",
          size === "default" &&
            "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:pe-8",
          size === "lg" && "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:pe-8.5",
          size === "xl" && "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:pe-9.5",
          className
        )}
        {...props}
      />
      {showTrigger && (
        <ComboboxTrigger
          className={cn(
            "absolute end-0.5 top-1/2 inline-flex size-7 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md not-data-disabled:opacity-80 outline-none transition-[color,opacity] hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden data-disabled:cursor-default [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
            size === "xs" && "size-5 rounded [&_svg:not([class*='size-'])]:size-3.5",
            size === "sm" && "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3.5",
            size === "lg" && "end-1 size-7",
            size === "xl" && "end-1 size-8 [&_svg:not([class*='size-'])]:size-4.5",
            triggerClassName
          )}
          {...triggerProps}
        >
          <IconSelector />
        </ComboboxTrigger>
      )}
      {showClear && (
        <ComboboxClear
          className={cn(
            "absolute end-0.5 top-1/2 inline-flex size-7 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full outline-none transition-[color,opacity] not-data-disabled:hover:bg-accent hover:opacity-100 data-disabled:cursor-default [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
            size === "xs" && "size-5 [&_svg:not([class*='size-'])]:size-3.5",
            size === "sm" && "size-6 [&_svg:not([class*='size-'])]:size-3.5",
            size === "lg" && "end-1 size-7",
            size === "xl" && "end-1 size-8 [&_svg:not([class*='size-'])]:size-4.5",
            clearClassName
          )}
          {...clearProps}
        >
          <IconX />
        </ComboboxClear>
      )}
    </ComboboxInputGroup>
  );
}

export function ComboboxInputGroup({
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.InputGroup>) {
  return (
    <ComboboxPrimitive.InputGroup
      data-slot="combobox-input-group"
      className={cn("relative w-full data-disabled:opacity-50", className)}
      {...props}
    />
  );
}

export function ComboboxChipsInput({
  className,
  size = "default",
  ...props
}: Omit<React.ComponentProps<typeof ComboboxPrimitive.Input>, "size"> & {
  size?: "xs" | "sm" | "default" | "lg" | "xl" | number;
}) {
  return (
    <ComboboxPrimitive.Input
      data-slot="combobox-chips-input"
      data-size={typeof size === "string" ? size : undefined}
      size={typeof size === "number" ? size : undefined}
      className={cn(
        "min-w-12 flex-1 ps-2 pe-2 outline-none [[data-slot=combobox-chip]+&]:ps-0.5",
        className
      )}
      {...props}
    />
  );
}

export function ComboboxChips({
  children,
  className,
  startAddon,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Chips> & {
  startAddon?: React.ReactNode;
}) {
  const { chipsRef } = useContext(ComboboxContext);

  return (
    <ComboboxPrimitive.Chips
      data-slot="combobox-chips"
      ref={chipsRef}
      className={cn(
        "relative inline-flex min-h-8 w-full flex-wrap items-center gap-1 rounded-lg border border-input bg-background p-[calc(--spacing(1)-1px)] text-[0.8125rem] shadow-xs/5 outline-none ring-ring/50 transition-shadow *:h-6 focus-within:border-ring focus-within:ring-3 has-disabled:pointer-events-none has-aria-invalid:border-danger has-disabled:opacity-50 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none has-aria-invalid:ring-danger/30 dark:not-has-disabled:bg-input/30",
        "has-data-[size=xs]:min-h-6 has-data-[size=xs]:gap-0.5 has-data-[size=xs]:rounded-sm has-data-[size=xs]:p-0.5 has-data-[size=xs]:text-[0.6875rem] has-data-[size=xs]:focus-within:ring-2 has-data-[size=xs]:*:h-4.5 has-data-[size=xs]:*:rounded-[calc(var(--radius-sm)-2px)]",
        "has-data-[size=sm]:min-h-7 has-data-[size=sm]:gap-0.5 has-data-[size=sm]:rounded-md has-data-[size=sm]:p-0.5 has-data-[size=sm]:text-xs has-data-[size=sm]:focus-within:ring-2 has-data-[size=sm]:*:h-5.5 has-data-[size=sm]:*:rounded-[calc(var(--radius-md)-2px)]",
        "has-data-[size=lg]:min-h-9 has-data-[size=lg]:text-sm has-data-[size=lg]:*:h-7",
        "has-data-[size=xl]:min-h-10 has-data-[size=xl]:text-[0.9375rem] has-data-[size=xl]:*:h-8",
        startAddon && "*:data-[slot=combobox-chips-input]:ps-1",
        className
      )}
      {...props}
    >
      {startAddon && (
        <div
          data-slot="combobox-start-addon"
          aria-hidden="true"
          className="flex shrink-0 items-center ps-2 has-[~[data-size=sm]]:ps-1.75 has-[~[data-size=xl]]:ps-2.5 has-[~[data-size=xs]]:ps-1.5 [&_svg:not([class*='size-'])]:size-4 has-[~[data-size=sm]]:[&_svg:not([class*='size-'])]:size-3.5 has-[~[data-size=xl]]:[&_svg:not([class*='size-'])]:size-4.5 has-[~[data-size=xs]]:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none"
        >
          {startAddon}
        </div>
      )}
      {children}
    </ComboboxPrimitive.Chips>
  );
}

export function ComboboxChip({
  children,
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Chip>) {
  return (
    <ComboboxPrimitive.Chip
      data-slot="combobox-chip"
      className={cn(
        "flex items-center rounded-[calc(var(--radius-lg)-3px)] bg-accent ps-2 font-medium text-accent-foreground outline-none focus-within:ring-1 focus-within:ring-ring",
        className
      )}
      {...props}
    >
      {children}
      <ComboboxChipRemove />
    </ComboboxPrimitive.Chip>
  );
}

export function ComboboxChipRemove({
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.ChipRemove>) {
  return (
    <ComboboxPrimitive.ChipRemove
      aria-label="Remove"
      data-slot="combobox-chip-remove"
      className={cn(
        "h-full shrink-0 cursor-pointer rounded-sm px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-3.5",
        className
      )}
      {...props}
    >
      <IconX />
    </ComboboxPrimitive.ChipRemove>
  );
}

export function ComboboxPortal(props: React.ComponentProps<typeof ComboboxPrimitive.Portal>) {
  return <ComboboxPrimitive.Portal data-slot="combobox-portal" {...props} />;
}

export function ComboboxPositioner({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Positioner>) {
  const { chipsRef } = useContext(ComboboxContext);

  return (
    <ComboboxPrimitive.Positioner
      data-slot="combobox-positioner"
      anchor={chipsRef ?? undefined}
      sideOffset={sideOffset}
      className={cn("z-50 flex select-none", className)}
      {...props}
    />
  );
}

export function ComboboxPopup({
  className,
  portalProps,
  positionerProps,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Popup> & {
  portalProps?: React.ComponentProps<typeof ComboboxPortal>;
  positionerProps?: React.ComponentProps<typeof ComboboxPositioner>;
}) {
  return (
    <ComboboxPortal {...portalProps}>
      <ComboboxPositioner {...positionerProps}>
        <ComboboxPrimitive.Popup
          data-slot="combobox-popup"
          className={cn(
            "flex not-has-data-[slot=scroll-area]:max-h-[min(var(--available-height),23rem)] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-col overflow-hidden rounded-lg border bg-popover shadow-lg/5 transition-[transform,scale,opacity] data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0",
            className
          )}
          {...props}
        />
      </ComboboxPositioner>
    </ComboboxPortal>
  );
}

export function ComboboxList({
  className,
  scrollArea = true,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.List> & { scrollArea?: boolean }) {
  return scrollArea ? (
    <ScrollArea scrollbarGutter scrollFade className="max-h-[min(var(--available-height),23rem)]">
      <ComboboxPrimitive.List
        data-slot="combobox-list"
        className={cn("not-empty:scroll-py-1 not-empty:p-1", className)}
        {...props}
      />
    </ScrollArea>
  ) : (
    <ComboboxPrimitive.List
      data-slot="combobox-list"
      className={cn(
        "not-empty:scroll-py-1 overflow-y-auto not-empty:p-1 [scrollbar-width:thin]",
        className
      )}
      {...props}
    />
  );
}

export function ComboboxItem({
  children,
  className,
  indicatorPosition = "end",
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Item> & {
  indicatorPosition?: "start" | "end";
}) {
  return (
    <ComboboxPrimitive.Item
      data-slot="combobox-item"
      className={cn(
        "grid min-h-7 cursor-default grid-cols-[1fr_1rem] items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        indicatorPosition === "start" && "grid-cols-[1rem_1fr] pe-4",
        className
      )}
      {...props}
    >
      <span
        className={cn(
          "flex items-center gap-2",
          indicatorPosition === "start" && "order-1 col-start-2 gap-1.5"
        )}
      >
        {children}
      </span>
      <ComboboxPrimitive.ItemIndicator>
        <svg
          fill="none"
          height="24"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/1500/svg"
        >
          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
        </svg>
      </ComboboxPrimitive.ItemIndicator>
    </ComboboxPrimitive.Item>
  );
}

export function ComboboxSeparator({
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Separator>) {
  return (
    <ComboboxPrimitive.Separator
      data-slot="combobox-separator"
      className={cn("mx-2 my-1 h-px bg-border last:hidden", className)}
      {...props}
    />
  );
}

export function ComboboxGroup({
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Group>) {
  return (
    <ComboboxPrimitive.Group
      data-slot="combobox-group"
      className={cn("[[role=group]+&]:mt-1.5", className)}
      {...props}
    />
  );
}

export function ComboboxGroupLabel({
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>) {
  return (
    <ComboboxPrimitive.GroupLabel
      data-slot="combobox-group-label"
      className={cn("px-2 py-1.5 font-medium text-muted-foreground text-xs", className)}
      {...props}
    />
  );
}

export function ComboboxEmpty({
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Empty>) {
  return (
    <ComboboxPrimitive.Empty
      data-slot="combobox-empty"
      className={cn(
        "not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm",
        className
      )}
      {...props}
    />
  );
}

export function ComboboxRow(props: React.ComponentProps<typeof ComboboxPrimitive.Row>) {
  return <ComboboxPrimitive.Row data-slot="combobox-row" {...props} />;
}

export function ComboboxStatus({
  className,
  ...props
}: React.ComponentProps<typeof ComboboxPrimitive.Status>) {
  return (
    <ComboboxPrimitive.Status
      data-slot="combobox-status"
      className={cn(
        "px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0",
        className
      )}
      {...props}
    />
  );
}

export const ComboboxCollection = ComboboxPrimitive.Collection;

export const useComboboxFilter = ComboboxPrimitive.useFilter;

export function groupComboboxItems<T extends { group: string }>(
  tags: T[]
): { value: string; items: T[] }[] {
  const groups: Record<string, T[]> = {};

  tags.forEach((tag) => {
    (groups[tag.group] ??= []).push(tag);
  });

  return Object.entries(groups).map(([value, items]) => ({
    value,
    items,
  }));
}

export { ComboboxPrimitive };

Usage

Single selection

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]
 
<Combobox items={items}>
  <ComboboxInput placeholder="Select an item..." />
  <ComboboxPopup>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>

Multiple selection

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox";

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]
<Combobox items={items} defaultValue={[items[0], items[1]]} multiple>
  <ComboboxChips className="w-64">
    <ComboboxValue>
      {(value: { label: string; value: string }[]) => (
        <>
          {value.map((item) => (
            <ComboboxChip aria-label={item.label} key={item.value}>
              {item.label}
            </ComboboxChip>
          ))}
          <ComboboxChipsInput placeholder={value.length > 0 ? undefined : "Select items..."} />
        </>
      )}
    </ComboboxValue>
  </ComboboxChips>
  <ComboboxPopup>
    <ComboboxEmpty>No items found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>

Examples

Sizes

"use client";

import { IconSearch } from "@tabler/icons-react";

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
  { label: "Blueberry", value: "blueberry" },
  { label: "Raspberry", value: "raspberry" },
  { label: "Blackberry", value: "blackberry" },
  { label: "Cherry", value: "cherry" },
  { label: "Papaya", value: "papaya" },
  { label: "Cantaloupe", value: "cantaloupe" },
  { label: "Honeydew", value: "honeydew" },
  { label: "Lemon", value: "lemon" },
  { label: "Lime", value: "lime" },
  { label: "Coconut", value: "coconut" },
  { label: "Pomegranate", value: "pomegranate" },
  { label: "Fig", value: "fig" },
  { label: "Date", value: "date" },
];

const sizes = ["xs", "sm", "default", "lg", "xl"] as const;

export function ComboboxDemo() {
  return (
    <div className="flex flex-col gap-5">
      {sizes.map((size) => (
        <Combobox items={items} key={size}>
          <ComboboxInput
            aria-label="Select a item"
            placeholder="Select a item…"
            size={size}
            startAddon={<IconSearch />}
            showClear
            showTrigger
          />
          <ComboboxPopup>
            <ComboboxEmpty>No items found.</ComboboxEmpty>
            <ComboboxList>
              {(item) => (
                <ComboboxItem key={item.value} value={item}>
                  {item.label}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxPopup>
        </Combobox>
      ))}
    </div>
  );
}

Disabled

"use client";

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={items} disabled>
      <ComboboxInput
        aria-label="Select a item"
        placeholder="Select a item…"
        inputGroupProps={{ className: "w-fit" }}
      />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Auto highlight

"use client";

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={items} autoHighlight>
      <ComboboxInput
        aria-label="Select a item"
        placeholder="Select a item…"
        inputGroupProps={{ className: "w-fit" }}
      />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

With clear button

"use client";

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={items}>
      <ComboboxInput
        aria-label="Select a item"
        placeholder="Select a item…"
        inputGroupProps={{ className: "w-fit" }}
        showClear
      />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Indicator position

"use client";

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={items}>
      <ComboboxInput
        aria-label="Select a item"
        placeholder="Select a item…"
        inputGroupProps={{ className: "w-fit" }}
        showClear
      />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item} indicatorPosition="start">
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Grouped

"use client";

import {
  Combobox,
  ComboboxCollection,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxGroupLabel,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  groupComboboxItems,
} from "@/components/ui/combobox";

type Item = {
  label: string;
  value: string;
  group: string;
};

const items: Item[] = [
  { label: "React", value: "react", group: "Frontend" },
  { label: "Vue", value: "vue", group: "Frontend" },
  { label: "Angular", value: "angular", group: "Frontend" },
  { label: "Svelte", value: "svelte", group: "Frontend" },
  { label: "Next.js", value: "nextjs", group: "Frontend" },
  { label: "Nuxt.js", value: "nuxtjs", group: "Frontend" },

  { label: "Node.js", value: "nodejs", group: "Backend" },
  { label: "Django", value: "django", group: "Backend" },
  { label: "Flask", value: "flask", group: "Backend" },
  { label: "Ruby on Rails", value: "rails", group: "Backend" },
  { label: "Spring Boot", value: "springboot", group: "Backend" },

  { label: "Flutter", value: "flutter", group: "Mobile" },
  { label: "React Native", value: "reactnative", group: "Mobile" },
  { label: "SwiftUI", value: "swiftui", group: "Mobile" },
  { label: "Kotlin Multiplatform", value: "kotlinmultiplatform", group: "Mobile" },
];

const groupedItems = groupComboboxItems(items);

type GroupItem = (typeof groupedItems)[number];

export function ComboboxDemo() {
  return (
    <Combobox items={groupedItems}>
      <ComboboxInput
        aria-label="Select a item"
        placeholder="Select a item…"
        inputGroupProps={{ className: "w-fit" }}
      />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(group: GroupItem) => (
            <ComboboxGroup key={group.value} items={group.items}>
              <ComboboxGroupLabel>{group.value}</ComboboxGroupLabel>
              <ComboboxCollection>
                {(item: Item) => (
                  <ComboboxItem key={item.value} value={item}>
                    {item.label}
                  </ComboboxItem>
                )}
              </ComboboxCollection>
            </ComboboxGroup>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Multiple

Apple

Banana

"use client";

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={items} defaultValue={[items[0], items[1]]} multiple>
      <ComboboxChips className="w-64">
        <ComboboxValue>
          {(value: { label: string; value: string }[]) => (
            <>
              {value.map((item) => (
                <ComboboxChip aria-label={item.label} key={item.value}>
                  {item.label}
                </ComboboxChip>
              ))}
              <ComboboxChipsInput placeholder={value.length > 0 ? undefined : "Select items..."} />
            </>
          )}
        </ComboboxValue>
      </ComboboxChips>
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Start addon

"use client";

import { IconSearch } from "@tabler/icons-react";

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={items}>
      <ComboboxInput
        aria-label="Select a item"
        placeholder="Select a item…"
        inputGroupProps={{ className: "w-fit" }}
        startAddon={<IconSearch />}
      />
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Multiple with start addon

Apple

Banana

"use client";

import { IconSearch } from "@tabler/icons-react";

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={items} defaultValue={[items[0], items[1]]} multiple>
      <ComboboxChips startAddon={<IconSearch />} className="w-64">
        <ComboboxValue>
          {(value: { label: string; value: string }[]) => (
            <>
              {value.map((item) => (
                <ComboboxChip aria-label={item.label} key={item.value}>
                  {item.label}
                </ComboboxChip>
              ))}
              <ComboboxChipsInput placeholder={value.length > 0 ? undefined : "Select items..."} />
            </>
          )}
        </ComboboxValue>
      </ComboboxChips>
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Multiple with limiting visible chips

Apple

Banana

"use client";

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

const CHIP_LIMIT = 3;

export function ComboboxDemo() {
  return (
    <Combobox items={items} defaultValue={[items[0], items[1]]} multiple>
      <ComboboxChips className="w-96">
        <ComboboxValue>
          {(selectedValues: { label: string; value: string }[]) => {
            const visibleValues = selectedValues.slice(0, CHIP_LIMIT);
            const hiddenCount = selectedValues.length - visibleValues.length;
            return (
              <>
                {visibleValues.map((item) => (
                  <ComboboxChip aria-label={item.label} key={item.value}>
                    {item.label}
                  </ComboboxChip>
                ))}
                {hiddenCount > 0 && <span>{`+${hiddenCount} more`}</span>}
                <ComboboxChipsInput
                  placeholder={selectedValues.length > 0 ? undefined : "Select items..."}
                />
              </>
            );
          }}
        </ComboboxValue>
      </ComboboxChips>
      <ComboboxPopup>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

"use client";

import { IconSearch, IconSelector } from "@tabler/icons-react";

import { cn } from "@/lib/cn";
import { buttonVariants } from "@/components/ui/button";
import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxTrigger,
  ComboboxValue,
} from "@/components/ui/combobox";

interface Country {
  code: string;
  continent: string;
  label: string;
  value: string;
}

const countries: Country[] = [
  { code: "af", continent: "Asia", label: "Afghanistan", value: "afghanistan" },
  { code: "al", continent: "Europe", label: "Albania", value: "albania" },
  { code: "dz", continent: "Africa", label: "Algeria", value: "algeria" },
  { code: "ad", continent: "Europe", label: "Andorra", value: "andorra" },
  { code: "ao", continent: "Africa", label: "Angola", value: "angola" },
  {
    code: "ar",
    continent: "South America",
    label: "Argentina",
    value: "argentina",
  },
  { code: "am", continent: "Asia", label: "Armenia", value: "armenia" },
  { code: "au", continent: "Oceania", label: "Australia", value: "australia" },
  { code: "at", continent: "Europe", label: "Austria", value: "austria" },
  { code: "az", continent: "Asia", label: "Azerbaijan", value: "azerbaijan" },
  {
    code: "bs",
    continent: "North America",
    label: "Bahamas",
    value: "bahamas",
  },
  { code: "bh", continent: "Asia", label: "Bahrain", value: "bahrain" },
  { code: "bd", continent: "Asia", label: "Bangladesh", value: "bangladesh" },
  {
    code: "bb",
    continent: "North America",
    label: "Barbados",
    value: "barbados",
  },
  { code: "by", continent: "Europe", label: "Belarus", value: "belarus" },
  { code: "be", continent: "Europe", label: "Belgium", value: "belgium" },
  { code: "bz", continent: "North America", label: "Belize", value: "belize" },
  { code: "bj", continent: "Africa", label: "Benin", value: "benin" },
  { code: "bt", continent: "Asia", label: "Bhutan", value: "bhutan" },
  {
    code: "bo",
    continent: "South America",
    label: "Bolivia",
    value: "bolivia",
  },
  {
    code: "ba",
    continent: "Europe",
    label: "Bosnia and Herzegovina",
    value: "bosnia-and-herzegovina",
  },
  { code: "bw", continent: "Africa", label: "Botswana", value: "botswana" },
  { code: "br", continent: "South America", label: "Brazil", value: "brazil" },
  { code: "bn", continent: "Asia", label: "Brunei", value: "brunei" },
  { code: "bg", continent: "Europe", label: "Bulgaria", value: "bulgaria" },
  {
    code: "bf",
    continent: "Africa",
    label: "Burkina Faso",
    value: "burkina-faso",
  },
  { code: "bi", continent: "Africa", label: "Burundi", value: "burundi" },
  { code: "kh", continent: "Asia", label: "Cambodia", value: "cambodia" },
  { code: "cm", continent: "Africa", label: "Cameroon", value: "cameroon" },
  { code: "ca", continent: "North America", label: "Canada", value: "canada" },
  { code: "cv", continent: "Africa", label: "Cape Verde", value: "cape-verde" },
  {
    code: "cf",
    continent: "Africa",
    label: "Central African Republic",
    value: "central-african-republic",
  },
  { code: "td", continent: "Africa", label: "Chad", value: "chad" },
  { code: "cl", continent: "South America", label: "Chile", value: "chile" },
  { code: "cn", continent: "Asia", label: "China", value: "china" },
  {
    code: "co",
    continent: "South America",
    label: "Colombia",
    value: "colombia",
  },
  { code: "km", continent: "Africa", label: "Comoros", value: "comoros" },
  { code: "cg", continent: "Africa", label: "Congo", value: "congo" },
  {
    code: "cr",
    continent: "North America",
    label: "Costa Rica",
    value: "costa-rica",
  },
  { code: "hr", continent: "Europe", label: "Croatia", value: "croatia" },
  { code: "cu", continent: "North America", label: "Cuba", value: "cuba" },
  { code: "cy", continent: "Asia", label: "Cyprus", value: "cyprus" },
  {
    code: "cz",
    continent: "Europe",
    label: "Czech Republic",
    value: "czech-republic",
  },
  { code: "dk", continent: "Europe", label: "Denmark", value: "denmark" },
  { code: "dj", continent: "Africa", label: "Djibouti", value: "djibouti" },
  {
    code: "dm",
    continent: "North America",
    label: "Dominica",
    value: "dominica",
  },
  {
    code: "do",
    continent: "North America",
    label: "Dominican Republic",
    value: "dominican-republic",
  },
  {
    code: "ec",
    continent: "South America",
    label: "Ecuador",
    value: "ecuador",
  },
  { code: "eg", continent: "Africa", label: "Egypt", value: "egypt" },
  {
    code: "sv",
    continent: "North America",
    label: "El Salvador",
    value: "el-salvador",
  },
  {
    code: "gq",
    continent: "Africa",
    label: "Equatorial Guinea",
    value: "equatorial-guinea",
  },
  { code: "er", continent: "Africa", label: "Eritrea", value: "eritrea" },
  { code: "ee", continent: "Europe", label: "Estonia", value: "estonia" },
  { code: "et", continent: "Africa", label: "Ethiopia", value: "ethiopia" },
  { code: "fj", continent: "Oceania", label: "Fiji", value: "fiji" },
  { code: "fi", continent: "Europe", label: "Finland", value: "finland" },
  { code: "fr", continent: "Europe", label: "France", value: "france" },
  { code: "ga", continent: "Africa", label: "Gabon", value: "gabon" },
  { code: "gm", continent: "Africa", label: "Gambia", value: "gambia" },
  { code: "ge", continent: "Asia", label: "Georgia", value: "georgia" },
  { code: "de", continent: "Europe", label: "Germany", value: "germany" },
  { code: "gh", continent: "Africa", label: "Ghana", value: "ghana" },
  { code: "gr", continent: "Europe", label: "Greece", value: "greece" },
  {
    code: "gd",
    continent: "North America",
    label: "Grenada",
    value: "grenada",
  },
  {
    code: "gt",
    continent: "North America",
    label: "Guatemala",
    value: "guatemala",
  },
  { code: "gn", continent: "Africa", label: "Guinea", value: "guinea" },
  {
    code: "gw",
    continent: "Africa",
    label: "Guinea-Bissau",
    value: "guinea-bissau",
  },
  { code: "gy", continent: "South America", label: "Guyana", value: "guyana" },
  { code: "ht", continent: "North America", label: "Haiti", value: "haiti" },
  {
    code: "hn",
    continent: "North America",
    label: "Honduras",
    value: "honduras",
  },
  { code: "hu", continent: "Europe", label: "Hungary", value: "hungary" },
  { code: "is", continent: "Europe", label: "Iceland", value: "iceland" },
  { code: "in", continent: "Asia", label: "India", value: "india" },
  { code: "id", continent: "Asia", label: "Indonesia", value: "indonesia" },
  { code: "ir", continent: "Asia", label: "Iran", value: "iran" },
  { code: "iq", continent: "Asia", label: "Iraq", value: "iraq" },
  { code: "ie", continent: "Europe", label: "Ireland", value: "ireland" },
  { code: "il", continent: "Asia", label: "Israel", value: "israel" },
  { code: "it", continent: "Europe", label: "Italy", value: "italy" },
  {
    code: "jm",
    continent: "North America",
    label: "Jamaica",
    value: "jamaica",
  },
  { code: "jp", continent: "Asia", label: "Japan", value: "japan" },
  { code: "jo", continent: "Asia", label: "Jordan", value: "jordan" },
  { code: "kz", continent: "Asia", label: "Kazakhstan", value: "kazakhstan" },
  { code: "ke", continent: "Africa", label: "Kenya", value: "kenya" },
  { code: "kw", continent: "Asia", label: "Kuwait", value: "kuwait" },
  { code: "kg", continent: "Asia", label: "Kyrgyzstan", value: "kyrgyzstan" },
  { code: "la", continent: "Asia", label: "Laos", value: "laos" },
  { code: "lv", continent: "Europe", label: "Latvia", value: "latvia" },
  { code: "lb", continent: "Asia", label: "Lebanon", value: "lebanon" },
  { code: "ls", continent: "Africa", label: "Lesotho", value: "lesotho" },
  { code: "lr", continent: "Africa", label: "Liberia", value: "liberia" },
  { code: "ly", continent: "Africa", label: "Libya", value: "libya" },
  {
    code: "li",
    continent: "Europe",
    label: "Liechtenstein",
    value: "liechtenstein",
  },
  { code: "lt", continent: "Europe", label: "Lithuania", value: "lithuania" },
  { code: "lu", continent: "Europe", label: "Luxembourg", value: "luxembourg" },
  { code: "mg", continent: "Africa", label: "Madagascar", value: "madagascar" },
  { code: "mw", continent: "Africa", label: "Malawi", value: "malawi" },
  { code: "my", continent: "Asia", label: "Malaysia", value: "malaysia" },
  { code: "mv", continent: "Asia", label: "Maldives", value: "maldives" },
  { code: "ml", continent: "Africa", label: "Mali", value: "mali" },
  { code: "mt", continent: "Europe", label: "Malta", value: "malta" },
  {
    code: "mh",
    continent: "Oceania",
    label: "Marshall Islands",
    value: "marshall-islands",
  },
  { code: "mr", continent: "Africa", label: "Mauritania", value: "mauritania" },
  { code: "mu", continent: "Africa", label: "Mauritius", value: "mauritius" },
  { code: "mx", continent: "North America", label: "Mexico", value: "mexico" },
  {
    code: "fm",
    continent: "Oceania",
    label: "Micronesia",
    value: "micronesia",
  },
  { code: "md", continent: "Europe", label: "Moldova", value: "moldova" },
  { code: "mc", continent: "Europe", label: "Monaco", value: "monaco" },
  { code: "mn", continent: "Asia", label: "Mongolia", value: "mongolia" },
  { code: "me", continent: "Europe", label: "Montenegro", value: "montenegro" },
  { code: "ma", continent: "Africa", label: "Morocco", value: "morocco" },
  { code: "mz", continent: "Africa", label: "Mozambique", value: "mozambique" },
  { code: "mm", continent: "Asia", label: "Myanmar", value: "myanmar" },
  { code: "na", continent: "Africa", label: "Namibia", value: "namibia" },
  { code: "nr", continent: "Oceania", label: "Nauru", value: "nauru" },
  { code: "np", continent: "Asia", label: "Nepal", value: "nepal" },
  {
    code: "nl",
    continent: "Europe",
    label: "Netherlands",
    value: "netherlands",
  },
  {
    code: "nz",
    continent: "Oceania",
    label: "New Zealand",
    value: "new-zealand",
  },
  {
    code: "ni",
    continent: "North America",
    label: "Nicaragua",
    value: "nicaragua",
  },
  { code: "ne", continent: "Africa", label: "Niger", value: "niger" },
  { code: "ng", continent: "Africa", label: "Nigeria", value: "nigeria" },
  { code: "kp", continent: "Asia", label: "North Korea", value: "north-korea" },
  {
    code: "mk",
    continent: "Europe",
    label: "North Macedonia",
    value: "north-macedonia",
  },
  { code: "no", continent: "Europe", label: "Norway", value: "norway" },
  { code: "om", continent: "Asia", label: "Oman", value: "oman" },
  { code: "pk", continent: "Asia", label: "Pakistan", value: "pakistan" },
  { code: "pw", continent: "Oceania", label: "Palau", value: "palau" },
  { code: "ps", continent: "Asia", label: "Palestine", value: "palestine" },
  { code: "pa", continent: "North America", label: "Panama", value: "panama" },
  {
    code: "pg",
    continent: "Oceania",
    label: "Papua New Guinea",
    value: "papua-new-guinea",
  },
  {
    code: "py",
    continent: "South America",
    label: "Paraguay",
    value: "paraguay",
  },
  { code: "pe", continent: "South America", label: "Peru", value: "peru" },
  { code: "ph", continent: "Asia", label: "Philippines", value: "philippines" },
  { code: "pl", continent: "Europe", label: "Poland", value: "poland" },
  { code: "pt", continent: "Europe", label: "Portugal", value: "portugal" },
  { code: "qa", continent: "Asia", label: "Qatar", value: "qatar" },
  { code: "ro", continent: "Europe", label: "Romania", value: "romania" },
  { code: "ru", continent: "Europe", label: "Russia", value: "russia" },
  { code: "rw", continent: "Africa", label: "Rwanda", value: "rwanda" },
  { code: "ws", continent: "Oceania", label: "Samoa", value: "samoa" },
  { code: "sm", continent: "Europe", label: "San Marino", value: "san-marino" },
  {
    code: "sa",
    continent: "Asia",
    label: "Saudi Arabia",
    value: "saudi-arabia",
  },
  { code: "sn", continent: "Africa", label: "Senegal", value: "senegal" },
  { code: "rs", continent: "Europe", label: "Serbia", value: "serbia" },
  { code: "sc", continent: "Africa", label: "Seychelles", value: "seychelles" },
  {
    code: "sl",
    continent: "Africa",
    label: "Sierra Leone",
    value: "sierra-leone",
  },
  { code: "sg", continent: "Asia", label: "Singapore", value: "singapore" },
  { code: "sk", continent: "Europe", label: "Slovakia", value: "slovakia" },
  { code: "si", continent: "Europe", label: "Slovenia", value: "slovenia" },
  {
    code: "sb",
    continent: "Oceania",
    label: "Solomon Islands",
    value: "solomon-islands",
  },
  { code: "so", continent: "Africa", label: "Somalia", value: "somalia" },
  {
    code: "za",
    continent: "Africa",
    label: "South Africa",
    value: "south-africa",
  },
  { code: "kr", continent: "Asia", label: "South Korea", value: "south-korea" },
  {
    code: "ss",
    continent: "Africa",
    label: "South Sudan",
    value: "south-sudan",
  },
  { code: "es", continent: "Europe", label: "Spain", value: "spain" },
  { code: "lk", continent: "Asia", label: "Sri Lanka", value: "sri-lanka" },
  { code: "sd", continent: "Africa", label: "Sudan", value: "sudan" },
  {
    code: "sr",
    continent: "South America",
    label: "Suriname",
    value: "suriname",
  },
  { code: "se", continent: "Europe", label: "Sweden", value: "sweden" },
  {
    code: "ch",
    continent: "Europe",
    label: "Switzerland",
    value: "switzerland",
  },
  { code: "sy", continent: "Asia", label: "Syria", value: "syria" },
  { code: "tw", continent: "Asia", label: "Taiwan", value: "taiwan" },
  { code: "tj", continent: "Asia", label: "Tajikistan", value: "tajikistan" },
  { code: "tz", continent: "Africa", label: "Tanzania", value: "tanzania" },
  { code: "th", continent: "Asia", label: "Thailand", value: "thailand" },
  { code: "tl", continent: "Asia", label: "Timor-Leste", value: "timor-leste" },
  { code: "tg", continent: "Africa", label: "Togo", value: "togo" },
  { code: "to", continent: "Oceania", label: "Tonga", value: "tonga" },
  {
    code: "tt",
    continent: "North America",
    label: "Trinidad and Tobago",
    value: "trinidad-and-tobago",
  },
  { code: "tn", continent: "Africa", label: "Tunisia", value: "tunisia" },
  { code: "tr", continent: "Asia", label: "Turkey", value: "turkey" },
  {
    code: "tm",
    continent: "Asia",
    label: "Turkmenistan",
    value: "turkmenistan",
  },
  { code: "tv", continent: "Oceania", label: "Tuvalu", value: "tuvalu" },
  { code: "ug", continent: "Africa", label: "Uganda", value: "uganda" },
  { code: "ua", continent: "Europe", label: "Ukraine", value: "ukraine" },
  {
    code: "ae",
    continent: "Asia",
    label: "United Arab Emirates",
    value: "united-arab-emirates",
  },
  {
    code: "gb",
    continent: "Europe",
    label: "United Kingdom",
    value: "united-kingdom",
  },
  {
    code: "us",
    continent: "North America",
    label: "United States",
    value: "united-states",
  },
  {
    code: "uy",
    continent: "South America",
    label: "Uruguay",
    value: "uruguay",
  },
  { code: "uz", continent: "Asia", label: "Uzbekistan", value: "uzbekistan" },
  { code: "vu", continent: "Oceania", label: "Vanuatu", value: "vanuatu" },
  {
    code: "va",
    continent: "Europe",
    label: "Vatican City",
    value: "vatican-city",
  },
  {
    code: "ve",
    continent: "South America",
    label: "Venezuela",
    value: "venezuela",
  },
  { code: "vn", continent: "Asia", label: "Vietnam", value: "vietnam" },
  { code: "ye", continent: "Asia", label: "Yemen", value: "yemen" },
  { code: "zm", continent: "Africa", label: "Zambia", value: "zambia" },
  { code: "zw", continent: "Africa", label: "Zimbabwe", value: "zimbabwe" },
];

export function ComboboxDemo() {
  return (
    <Combobox items={countries}>
      <ComboboxTrigger
        className={cn(buttonVariants({ variant: "outline" }), "w-full max-w-64 justify-between")}
      >
        <ComboboxValue placeholder="Select a country…" />
        <IconSelector className="-me-1" />
      </ComboboxTrigger>
      <ComboboxPopup aria-label="select country">
        <div className="border-b p-2">
          <ComboboxInput
            placeholder="Search countries…"
            startAddon={<IconSearch />}
            showTrigger={false}
            className="rounded-sm"
          />
        </div>
        <ComboboxEmpty>No countries found.</ComboboxEmpty>
        <ComboboxList>
          {(country: Country) => (
            <ComboboxItem key={country.code} value={country}>
              {country.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}

Collapsible Command

Combobox

On this page