Combobox

A searchable single-select input composed from Popover and Command — atomx ships it as a ready-to-use block so you get a consistent API instead of assembling the primitives yourself.

Install

npx shadcn@latest add https://atomx.acau.net/r/combobox.json

This installs the Combobox block and its three registry dependencies — popover, command, and button — in one step.

Why a block?

Upstream shadcn/ui documents Combobox only as a composition pattern (Popover + Command wired together). That leaves every team to re-implement the same plumbing — open/close state, filter loop, selected-item display, onChange wiring — over and over.

atomx ships Combobox as a first-class block so you get:

• A stable options / value / onChange API you can drop in anywhere.
• The Popover + Command composition handled for you.
• Full access to the source after install — customize it freely.

If you need multi-select, async options, or grouped sections, copy the block and extend it. The primitives (Popover, Command) are installed alongside it.

Usage

import { useState } from "react"
import { Combobox } from "@/components/combobox/combobox"

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export function Example() {
  const [value, setValue] = useState("")

  return (
    <Combobox
      options={frameworks}
      value={value}
      onChange={setValue}
      placeholder="Select a framework..."
      searchPlaceholder="Search frameworks..."
      emptyText="No framework found."
    />
  )
}

Preview

Props

ComboboxOption type: { value: string; label: string }.