Multi-selectable Combobox
Combining Combobox and Select to create an accessible multi-selectable search input in React.
import "./style.css";
import { useDeferredValue, useMemo, useState } from "react";
import { matchSorter } from "match-sorter";
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) => (
))}
{!matches.length && <div className="no-results">No results found</div>}
</div>
);
}
Components
ComboboxFill in a React input field with autocomplete & autosuggest functionalities. Choose from a list of suggested values with full keyboard support. This component is based on the WAI-ARIA Combobox Pattern.
SelectSelect a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.
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:
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.