Combobox

Forms

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>
  );
}