Ariakit
/

Multi-selectable Combobox

Allowing Combobox to select multiple options by passing an array value to the selectedValue prop.

import * as Ariakit from "@ariakit/react";
import { matchSorter } from "match-sorter";
import { useMemo, useState, useTransition } from "react";
import list from "./list.ts";
import "./style.css";
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 (
selectedValue={selectedValues}
setSelectedValue={setSelectedValues}
setValue={(value) => {
startTransition(() => {
setSearchValue(value);
});
}}
>
<Ariakit.ComboboxLabel className="label">
Your favorite food
placeholder="e.g., Apple, Burger"
className="combobox"
/>
gutter={8}
className="popover"
aria-busy={isPending}
>
{matches.map((value) => (
key={value}
value={value}
className="combobox-item"
>
{value}
))}
{!matches.length && <div className="no-results">No results found</div>}
);
}

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue