iconiq.

Registry Component

Combobox

Searchable single-select input with inline filtering, arrow-key navigation, and an animated dropdown that stays visually attached to the field.

Live Playground

Type to filter the list, move with the arrow keys, and press Enter to commit a selection.

Current selection

Transit window - Tighter route through the midfield line

Install And Iterate

Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.

Install

Build with v0

Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.

Usage

Alias the lowercase export to `Combobox` in your app, then use the API details below to tune filtering, clearing, disabled state, and registry installs.

tsx
import { combobox as Combobox, type ComboboxOption } from "@/components/ui/combobox";
import { useState } from "react";

const options: ComboboxOption[] = [
  { 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" },
];

export function RoutePicker() {
  const [value, setValue] = useState("transit");

  return (
    <Combobox
      className="w-full"
      emptyMessage="No route matches that query."
      onChange={setValue}
      options={options}
      placeholder="Pick a route..."
      value={value}
    />
  );
}

API Details

Each item below expands into implementation notes, API behavior, and any direct registry file install needed for related assets.