"use client"

import * as React from "react"

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxStatus,
} from "@/registry/ui/combobox/combobox"

interface Station {
  label: string
  value: string
}

const stations: Station[] = [
  { label: "Svalbard — SG-1", value: "sg-1" },
  { label: "Reykjavik — RK-4", value: "rk-4" },
  { label: "Quito — QT-2", value: "qt-2" },
  { label: "Nairobi — NB-7", value: "nb-7" },
  { label: "Hobart — HB-3", value: "hb-3" },
  { label: "Punta Arenas — PA-9", value: "pa-9" },
]

export default function ComboboxAsync() {
  const [items, setItems] = React.useState<Station[]>([])
  const [searching, setSearching] = React.useState(false)
  const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined)

  function search(query: string) {
    clearTimeout(timeout.current)
    setSearching(true)
    timeout.current = setTimeout(() => {
      const q = query.trim().toLowerCase()
      setItems(stations.filter((s) => s.label.toLowerCase().includes(q)))
      setSearching(false)
    }, 400)
  }

  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <label htmlFor="ground-station" className="text-sm font-medium">
        Ground station
      </label>
      <Combobox items={items} filter={null} onInputValueChange={search}>
        <ComboboxInput id="ground-station" placeholder="Search the network" />
        <ComboboxContent>
          <ComboboxStatus>{searching ? "Scanning…" : null}</ComboboxStatus>
          <ComboboxEmpty>
            {searching ? null : "No station in range."}
          </ComboboxEmpty>
          <ComboboxList>
            {(station: Station) => (
              <ComboboxItem key={station.value} value={station}>
                {station.label}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  )
}
prop	type	default
disabled	boolean	false
readOnly	boolean	false
autoHighlight	boolean	false
openOnInputClick	boolean	true
Draw

Playground

Examples

Props
