About
A searchable select field where typing filters a list of options, arrow keys move the highlight, and Enter commits the choice.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Combobox to your project and fits it to your theme.
Code
How Combobox is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Combobox from "@/components/ui/combobox";
const PLANS = [
{ label: "Solo — 1 seat", value: "solo" },
{ label: "Team — up to 20 seats", value: "team" },
{ label: "Enterprise — unlimited", value: "enterprise" },
{ label: "Legacy (unavailable)", value: "legacy", disabled: true },
];
const COUNTRIES = [
"Argentina",
"Australia",
"Austria",
"Belgium",
"Brazil",
"Canada",
"Chile",
"China",
"Colombia",
"Czechia",
"Denmark",
"Egypt",
"Estonia",
"Finland",
"France",
"Germany",
"Ghana",
"Greece",
"Hungary",
"Iceland",
"India",
"Indonesia",
"Ireland",
"Israel",
"Italy",
"Japan",
"Kenya",
"Latvia",
"Lithuania",
"Mexico",
"Netherlands",
"New Zealand",
"Nigeria",
"Norway",
"Poland",
"Portugal",
"Singapore",
"South Korea",
"Spain",
"Sweden",
"Switzerland",
"United Kingdom",
"United States",
"Vietnam",
].map((label) => ({ label, value: label.toLowerCase().replace(/\s+/g, "-") }));
export default function ComboboxDemo() {
return (
<div
className="mors-scope w-full max-w-xl grid grid-cols-1 sm:grid-cols-2 gap-6 p-6"
style={{
background: "var(--mors-color-canvas)",
color: "var(--mors-color-text)",
}}
>
<Combobox
label="Country"
options={COUNTRIES}
placeholder="Search countries"
/>
<Combobox label="Plan" options={PLANS} defaultValue="team" />
</div>
);
}