Combobox

A searchable input with a filtered dropdown list for picking one option, or several as removable chips, from a set of items.

@delego

byappica-dev

Outline vs soft variant combobox preview

"use client";

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

const frameworks = [
  "Next.js",
  "Remix",
  "Astro",
  "Nuxt.js",
  "SvelteKit",
  "SolidStart",
  "Gatsby",
  "Vite",
];
const variants = ["outline", "soft"] as const;

export default function ComboboxVariants() {
  return (
    <div className="flex w-full max-w-70 flex-col gap-4">
      {variants.map((variant) => (
        <Combobox key={variant} items={frameworks} variant={variant}>
          <ComboboxInput
            placeholder="Search a framework"
            aria-label={`Search (${variant})`}
          />
          <ComboboxContent>
            <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
            <ComboboxList>
              {(item: string) => (
                <ComboboxItem key={item} value={item}>
                  {item}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
      ))}
    </div>
  );
}