"use client"

import { useState } from "react"
import { ChevronDown, Plus, Check } from "lucide-react"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/registry/ui/popover"
import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/registry/ui/command"
import { cn } from "@/registry/lib/utils"

export interface ComboboxItem {
  id: string | number
  label: string
  meta?: string
  disabled?: boolean
}

interface ComboboxProps {
  items: ComboboxItem[]
  value: string | number
  onSelect: (item: ComboboxItem) => void
  /** Display label for the trigger */
  triggerLabel: string
  /** Secondary text shown after the label */
  triggerMeta?: string
  /** Show the search input field */
  searchable?: boolean
  /** Placeholder for the search input */
  searchPlaceholder?: string
  /** Empty state text when no results match */
  emptyText?: string
  /** Label for the create action (e.g. "New edition"). Omit to hide. */
  createLabel?: string
  /** Called when the create action is clicked */
  onCreate?: () => void
  /** Popover alignment */
  align?: "start" | "center" | "end"
  className?: string
}

export function Combobox({
  items,
  value,
  onSelect,
  triggerLabel,
  triggerMeta,
  searchable = false,
  searchPlaceholder = "Search...",
  emptyText = "No results.",
  createLabel,
  onCreate,
  align = "start",
  className,
}: ComboboxProps) {
  const [open, setOpen] = useState(false)

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          data-slot="combobox-trigger"
          className={cn(
            "group border-border flex w-fit min-w-48 items-center gap-2 rounded-md border bg-transparent px-3 text-base md:text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring-focus focus-visible:ring-[3px] h-8 cursor-pointer dark:bg-neutral-800 dark:hover:bg-neutral-700",
            className
          )}
        >
          <span>{triggerLabel}</span>
          {triggerMeta && (
            <span className="text-muted-foreground text-xs group-hover:text-inherit">
              {triggerMeta}
            </span>
          )}
          <ChevronDown className="ml-auto h-3 w-3 text-muted-foreground group-hover:text-inherit" />
        </button>
      </PopoverTrigger>
      <PopoverContent className="w-(--radix-popover-trigger-width) min-w-48 p-0" align={align}>
        <Command>
          {searchable && <CommandInput placeholder={searchPlaceholder} />}
          {createLabel && onCreate && (
            <div className="border-b border-border p-1">
              <button
                type="button"
                onClick={() => {
                  onCreate()
                  setOpen(false)
                }}
                className="flex items-center gap-2 w-full px-2 py-1.5 pointer-coarse:py-3 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground cursor-pointer"
              >
                <Plus className="h-3 w-3" />
                {createLabel}
              </button>
            </div>
          )}
          <CommandList className="p-1">
            <CommandEmpty>{emptyText}</CommandEmpty>
            {items.map((item) => (
              <CommandItem
                key={item.id}
                value={`${item.label} ${item.meta || ""}`}
                onSelect={() => {
                  onSelect(item)
                  setOpen(false)
                }}
                disabled={item.disabled}
                className="group/item cursor-pointer"
              >
                <Check
                  className={cn(
                    "h-3 w-3 mr-2 group-data-[selected=true]/item:text-inherit",
                    value === item.id ? "opacity-100" : "opacity-0"
                  )}
                />
                <span className="font-medium">{item.label}</span>
                {item.meta && (
                  <span className="text-muted-foreground group-data-[selected=true]/item:text-inherit text-xs ml-auto font-mono">
                    {item.meta}
                  </span>
                )}
              </CommandItem>
            ))}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
Search documentation

Combobox

Installation

Usage

Examples

Default
