Combobox

"use client";

import { Combobox } from "@/ui";

const countries = [
  "China",
  "United States",
  "Japan",
  "Germany",
  "France",
  "United Kingdom",
  "Canada",
  "Australia",
  "Italy",
  "Brazil",
];

export default function Demo() {
  return <Combobox options={countries} placeholder="Select a country" />;
}

"use client";

import { useState } from "react";
import { Combobox } from "@/ui";

const countries = [
  "China",
  "United States",
  "Japan",
  "Germany",
  "France",
  "United Kingdom",
  "Canada",
  "Australia",
  "Italy",
  "Brazil",
];

export default function Demo() {
  const [value, setValue] = useState("");
  const invalid = value.length > 0 && !countries.includes(value);

  return (
    <div className="flex flex-col gap-4 w-72">
      <Combobox
        options={countries}
        placeholder="Choose a country"
        value={value}
        onValueChange={setValue}
        invalid={invalid}
      />
      {invalid && (
        <span className="text-danger text-sm">
          Pick a country from the list — free text is not allowed
        </span>
      )}
    </div>
  );
}

"use client";

import { SearchX } from "lucide-react";
import { Combobox } from "@/ui";

const frameworks = ["React", "Vue", "Svelte", "Solid", "Preact"];

export default function Demo() {
  return (
    <div className="w-72">
      <Combobox
        options={frameworks}
        placeholder="Search a framework"
        empty={
          <div className="flex flex-col items-center gap-1.5 py-4">
            <SearchX className="size-5" />
            <span>No framework matches your search</span>
          </div>
        }
      />
    </div>
  );
}

"use client";

import { Combobox, type ComboboxFetcher } from "@/ui";

const fetchAsyncOptions: ComboboxFetcher = async ({ page, size, keyword }) => {
  await new Promise((resolve) => setTimeout(resolve, 200));

  const totalItems = 1000;
  const allItems = Array.from({ length: totalItems }, (_, i) => `Item ${i + 1}`);
  const filtered = keyword
    ? allItems.filter((item) => item.toLowerCase().includes(keyword.toLowerCase()))
    : allItems;
  const start = (page - 1) * size;
  const paged = filtered.slice(start, start + size);

  return { list: paged, total: filtered.length };
};

export default function Demo() {
  return <Combobox fetcher={fetchAsyncOptions} placeholder="Search items" />;
}