Combobox

import { Combobox, ComboboxItem } from "@rdloom/react";

const countries = [
  { id: "in", name: "India" },
  { id: "jp", name: "Japan" },
  { id: "de", name: "Germany" },
  { id: "br", name: "Brazil" },
  { id: "ca", name: "Canada" },
  { id: "ke", name: "Kenya" },
];

export default function ComboboxMultipleExample() {
  return (
    <Combobox
      className="w-72"
      label="Markets"
      selectionMode="multiple"
      placeholder="Add markets"
      defaultItems={countries}
      defaultValue={["in", "jp"]}
    >
      {(c) => <ComboboxItem id={c.id}>{c.name}</ComboboxItem>}
    </Combobox>
  );
}

import { useAsyncList } from "react-aria-components";
import { Combobox, ComboboxItem } from "@rdloom/react";

interface User {
  id: string;
  name: string;
}

const directory: User[] = Array.from({ length: 200 }, (_, i) => ({ id: `u${i}`, name: `User ${i + 1}` }));

/** Stands in for your API: 20 results per page. */
async function searchUsers(query: string, cursor: number) {
  await new Promise((r) => setTimeout(r, 300));
  const matches = directory.filter((u) => u.name.toLowerCase().includes(query.toLowerCase()));
  const next = cursor + 20;
  return { items: matches.slice(cursor, next), next: next < matches.length ? next : undefined };
}

export default function ComboboxAsyncExample() {
  // useAsyncList handles filtering, paging and out-of-order responses.
  const users = useAsyncList<User, number>({
    async load({ filterText, cursor = 0 }) {
      const page = await searchUsers(filterText ?? "", cursor);
      return { items: page.items, cursor: page.next };
    },
  });
  return (
    <Combobox
      className="w-64"
      label="Assignee"
      placeholder="Find a user"
      items={users.items}
      inputValue={users.filterText}
      onInputChange={users.setFilterText}
      isLoading={users.isLoading}
      onLoadMore={users.loadMore}
      menuTrigger="focus"
    >
      {(u) => <ComboboxItem id={u.id}>{u.name}</ComboboxItem>}
    </Combobox>
  );
}

import { Combobox, ComboboxItem } from "@rdloom/react";

const tags = [
  { id: "bug", name: "bug" },
  { id: "feature", name: "feature" },
  { id: "docs", name: "docs" },
];

export default function ComboboxCustomValueExample() {
  return (
    <Combobox className="w-64" label="Tag" description="Pick one or type your own" allowsCustomValue defaultItems={tags}>
      {(t) => <ComboboxItem id={t.id}>{t.name}</ComboboxItem>}
    </Combobox>
  );
}

import { Combobox, ComboboxItem } from "@rdloom/react";

const products = Array.from({ length: 5000 }, (_, i) => ({ id: `p${i}`, name: `Product ${String(i + 1).padStart(4, "0")}` }));

export default function ComboboxVirtualizedExample() {
  return (
    <Combobox className="w-64" label="Product" description="5,000 options" virtualized defaultItems={products} placeholder="Search products">
      {(p) => <ComboboxItem id={p.id}>{p.name}</ComboboxItem>}
    </Combobox>
  );
}