Combobox

import { useState } from "react";
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxList,
  ComboboxTrigger,
} from "@gpuixui/components/combobox";

const people = [
  {
    value: "ada",
    label: "Ada Lovelace",
    description: "Engineering · compilers",
  },
  {
    value: "grace",
    label: "Grace Hopper",
    description: "Platform · releases",
  },
];

export const ReviewerField = () => {
  const [reviewer, setReviewer] = useState<string | null>("ada");

  return (
    <Combobox
      onValueChange={(value) =>
        setReviewer(typeof value === "string" ? value : null)
      }
      options={people}
      value={reviewer ?? undefined}
    >
      <ComboboxTrigger label="Reviewer" placeholder="Choose a reviewer…" />
      <ComboboxContent>
        <ComboboxInput label="Search reviewers" />
        <ComboboxList label="Reviewers" />
        <ComboboxEmpty />
      </ComboboxContent>
    </Combobox>
  );
};

Combobox
├── ComboboxTrigger
└── ComboboxContent
    ├── ComboboxInput
    ├── ComboboxList
    │   └── ComboboxItem
    └── ComboboxEmpty