Ariakit
/

Select with Combobox

Combining Select and Combobox to create a dropdown with a search field that can be used to filter items.

Open preview in a new tab
Favorite fruit
Edit withViteNext.js
import "./style.css";
import { startTransition, useMemo, useState } from "react";
import * as Ariakit from "@ariakit/react";
import { matchSorter } from "match-sorter";
import list from "./list.ts";
export default function Example() {
const [searchValue, setSearchValue] = useState("");
const matches = useMemo(() => {
return matchSorter(list, searchValue, {
baseSort: (a, b) => (a.index < b.index ? -1 : 1),
});
}, [searchValue]);
return (
<div className="wrapper">
setValue={(value) => {
startTransition(() => {
setSearchValue(value);
});
}}
>
<Ariakit.Select className="button" />
<Ariakit.SelectPopover gutter={4} sameWidth className="popover">
<div className="combobox-wrapper">
placeholder="Search..."
className="combobox"
/>
</div>
{matches.map((value) => (
key={value}
value={value}
className="select-item"
/>
))}
</div>
);
}

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue