Combobox

Component 8

About

A searchable dropdown select with filtering, keyboard navigation, animated highlight/checkmark, and optional multi-select chips, built on Base UI's combobox primitive.

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

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