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

Loading preview...

"use client";

import * as React from "react";
import {
  Combobox,
  ComboboxChips,
  ComboboxChip,
  ComboboxValue,
  ComboboxInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxList,
  ComboboxItem,
} from "@/components/ui/combobox";

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

export default function ComboboxMultiple() {
  const [value, setValue] = React.useState<string[]>(["Next.js", "Astro"]);

  return (
    <div className="w-full max-w-70">
      <Combobox
        items={frameworks}
        multiple
        value={value}
        onValueChange={(v) => setValue(v as string[])}
      >
        <ComboboxChips placeholder="Add frameworks">
          <ComboboxValue>
            {(selected: string[]) =>
              selected.map((item) => (
                <ComboboxChip key={item} aria-label={item}>
                  {item}
                </ComboboxChip>
              ))
            }
          </ComboboxValue>
        </ComboboxChips>
        <ComboboxContent>
          <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
          <ComboboxList>
            {(item: string) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  );
}