ComboboxGroup
Organizing Combobox items into labelled groups using the ComboboxGroup
and ComboboxGroupLabel
components in React.
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 (
<div className="wrapper">
<label className="label">
Your favorite food
placeholder="e.g., Apple"
value={value}
onChange={setValue}
>
{matches.length ? (
matches.map(([type, items], i) => (
<React.Fragment key={type}>
{items.map((item) => (
))}
</React.Fragment>
))
) : (
<div className="no-results">No results found</div>
)}
</label>
</div>
);
}
Components
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.