Multi-selectable Combobox
Allowing Combobox to select multiple options by passing an array value to the selectedValue
prop.
import "./style.css";
import { useMemo, useState, useTransition } from "react";
import * as Ariakit from "@ariakit/react";
import { matchSorter } from "match-sorter";
import list from "./list.js";
export default function Example() {
const [isPending, startTransition] = useTransition();
const [searchValue, setSearchValue] = useState("");
const [selectedValues, setSelectedValues] = useState(["Bacon"]);
const matches = useMemo(() => matchSorter(list, searchValue), [searchValue]);
return (
startTransition(() => {
setSearchValue(value);
});
}}
>
Your favorite food
placeholder="e.g., Apple, Burger"
className="combobox"
/>
className="popover"
aria-busy={isPending}
>
{matches.map((value) => (
key={value}
className="combobox-item"
>
{value}
))}
{!matches.length && <div className="no-results">No results found</div>}
);
}