A dropdown select with a built-in search input, keyboard navigation, and animated filtering of options.
"use client";
import SearchableDropdown from "@/components/ui/searchable-dropdown";
const frameworks = [
{
id: 1,
label: "React",
description: "A JavaScript library for building UIs",
},
{ id: 2, label: "Vue", description: "The progressive JavaScript framework" },
{ id: 3, label: "Angular", description: "Platform for building web apps" },
{ id: 4, label: "Svelte", description: "Cybernetically enhanced web apps" },
{ id: 5, label: "Solid", description: "Simple and performant reactivity" },
{ id: 6, label: "Qwik", description: "Framework for instant web apps" },
];
export default function SearchableDropdownDemo() {
return (
<div className="flex min-h-[260px] w-full items-center justify-center p-8">
<SearchableDropdown
className="w-72"
items={frameworks}
label="Select a framework"
onChange={(item) => console.log(item)}
placeholder="Search frameworks..."
/>
</div>
);
}
Part of SmoothUI — browse the full library on 21st.dev.