"use client";

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
  Label,
} from "@countryclub/ui-react";
import { useState } from "react";

const amenities = ["Golf", "Tennis", "Pool", "Spa", "Dining", "Fitness"];

export default function ComboboxMultiple() {
  const [value, setValue] = useState<string[]>(["Golf"]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="amenities">Amenities</Label>
      <Combobox
        items={amenities}
        multiple
        onValueChange={setValue}
        value={value}
      >
        <ComboboxChips>
          <ComboboxValue>
            {(selected: string[]) => (
              <>
                {selected.map((item) => (
                  <ComboboxChip key={item}>{item}</ComboboxChip>
                ))}
                <ComboboxInput
                  id="amenities"
                  placeholder={selected.length > 0 ? "" : "Add amenities"}
                />
              </>
            )}
          </ComboboxValue>
        </ComboboxChips>
        <ComboboxPopup>
          <ComboboxEmpty>No amenity found.</ComboboxEmpty>
          <ComboboxList>
            {(item: string) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxPopup>
      </Combobox>
    </div>
  );
}
Combobox

Import

Default

Multiple with Chips
