A searchable dropdown select with filtering, keyboard navigation, animated highlight/checkmark, and optional multi-select chips, built on Base UI's combobox primitive.
"use client";
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox";
import { useState } from "react";
type RouteOption = {
value: string;
label: string;
description: string;
};
const options: RouteOption[] = [
{
value: "scout",
label: "Scout pass",
description: "First scan before the sprint opens up",
},
{
value: "transit",
label: "Transit window",
description: "Tighter route through the midfield line",
},
{
value: "deep",
label: "Deep field",
description: "Longer view with less traffic around it",
},
{
value: "late-run",
label: "Late run",
description: "Arrive second and attack the gap late",
},
];
export default function ComboboxDemo() {
const [value, setValue] = useState<RouteOption | null>(options[1]);
return (
<div className="w-full max-w-sm">
<Combobox
itemToStringLabel={(item) => item.label}
itemToStringValue={(item) => item.value}
items={options}
onValueChange={setValue}
value={value}
>
<ComboboxInput label="Pick a route" placeholder="Search routes..." />
<ComboboxContent>
<ComboboxList>
{(option: RouteOption, index: number) => (
<ComboboxItem
description={option.description}
index={index}
key={option.value}
value={option}
>
{option.label}
</ComboboxItem>
)}
</ComboboxList>
<ComboboxEmpty>No route matches that query.</ComboboxEmpty>
</ComboboxContent>
</Combobox>
</div>
);
}