Ariakit
/

ComboboxGroup

Organizing Combobox items into labelled groups using the ComboboxGroup and ComboboxGroupLabel components in React.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import * as React from "react";
import groupBy from "lodash-es/groupBy.js";
import { matchSorter } from "match-sorter";
import {
} from "./combobox.jsx";
import food from "./food.js";
export default function Example() {
const [value, setValue] = React.useState("");
const deferredValue = React.useDeferredValue(value);
const matches = React.useMemo(() => {
const items = matchSorter(food, deferredValue, { keys: ["name"] });
return Object.entries(groupBy(items, "type"));
}, [deferredValue]);
return (
<label className="label">
Your favorite food
autoComplete="both"
placeholder="e.g., Apple"
value={value}
onChange={setValue}
>
{matches.length ? (
matches.map(([type, items], i) => (
<React.Fragment key={type}>
<ComboboxGroup label={type}>
{items.map((item) => (
<ComboboxItem key={item.name} value={item.name} />
))}
{i < matches.length - 1 && <ComboboxSeparator />}
</React.Fragment>
))
) : (
<div className="no-results">No results found</div>
)}
</label>
);
}

Components

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue