Ariakit
/

Multi-selectable Combobox

Combining Combobox and Select to create an accessible multi-selectable search input in React.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import { useDeferredValue, useMemo, useState } from "react";
import { matchSorter } from "match-sorter";
import { Combobox, ComboboxItem } from "./combobox-multiple.jsx";
import list from "./list.js";
export default function Example() {
const [value, setValue] = useState("");
const [values, setValues] = useState<string[]>(["Bacon"]);
const deferredValue = useDeferredValue(value);
const matches = useMemo(
() => matchSorter(list, deferredValue),
[deferredValue],
);
return (
<div className="wrapper">
label="Your favorite food"
placeholder="e.g., Apple, Burger"
value={value}
onChange={setValue}
values={values}
onValuesChange={setValues}
>
{matches.map((value, i) => (
<ComboboxItem key={value + i} value={value} />
))}
{!matches.length && <div className="no-results">No results found</div>}
</div>
);
}

Components

Composition

In this example, we're combining both Combobox and Select by using the render prop. This is because SelectList and SelectItem can manage multi-selection behavior:

<ComboboxPopover render={<SelectList />} />
<SelectItem render={<ComboboxItem />}>

For more information about this pattern, refer to the Composition guide.

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

No Spam. Unsubscribe at any time.