Shadcn Autocomplete for React Radix UI

AutocompleteRoot
├── AutocompleteClearTrigger
├── AutocompleteContent
├── AutocompleteControl
├── AutocompleteInput
├── AutocompleteItem
│   ├── AutocompleteItemGroup
│   │   └── AutocompleteItemGroupLabel
│   ├── AutocompleteItemIndicator
│   └── AutocompleteItemText
├── AutocompleteLabel
├── AutocompleteList
├── AutocompletePositioner
└── AutocompleteTrigger

import { useListCollection } from "@ark-ui/react/collection";
import { useFilter } from "@ark-ui/react/locale";
import { Field, FieldLabel } from "@registry/react/components/field";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@/components/ui/autocomplete";

const AutocompleteDemo = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Field className="w-full max-w-64">
      <FieldLabel>Search fruits</FieldLabel>
      <Autocomplete
        collection={collection}
        onInputValueChange={({ inputValue }) => filter(inputValue)}
      >
        <AutocompleteInput placeholder="e.g. Apple" showClear />
        <AutocompleteContent>
          <AutocompleteEmpty />
          <AutocompleteList>
            {collection.items.map((item) => (
              <AutocompleteItem item={item} key={item.value}>
                {item.label}
              </AutocompleteItem>
            ))}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </Field>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];