Creatable Combobox

{
  "registries": {
    "@flowkit-ui": "https://flowkit-ui.vzkiss.com/r/{name}.json"
  }
}

"use client";

import { useState } from "react";
import {
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";
import {
  CreatableCombobox,
  ComboboxItemCreatable,
  isCreatableItem,
} from "@/components/ui/creatable-combobox";

const initialItems = ["Bug", "Regression", "Tech Debt"];

export function ExampleCreatableCombobox() {
  const [items, setItems] = useState(initialItems);

  return (
    <CreatableCombobox
      items={items}
      onCreateValue={(value) =>
        setItems((prev) => [...prev, value].sort((a, b) => a.localeCompare(b)))
      }
    >
      <ComboboxInput placeholder="Create a tag..." />
      <ComboboxContent>
        <ComboboxEmpty>No matches.</ComboboxEmpty>
        <ComboboxList>
          {(item) =>
            isCreatableItem(item) ? (
              <ComboboxItemCreatable key="__create__" value={item} />
            ) : (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )
          }
        </ComboboxList>
      </ComboboxContent>
    </CreatableCombobox>
  );
}