Combobox

A debossed text field that filters a listbox of options as you type. Built on Base UI Combobox — it owns filtering, keyboard navigation, and selection; seamui adds the well/key depth and overlay motion.

A single-select filter — type to narrow, pick one option.

tsx

"use client"

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

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "svelte", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "solid", label: "SolidStart" },
]

export default function ComboboxDemo() {
  return (
    <div className="w-64">
      <Combobox
        items={frameworks}
        itemToStringLabel={(f: (typeof frameworks)[number]) => f.label}
      >
        <ComboboxInput placeholder="Search framework…" />
        <ComboboxContent>
          <ComboboxEmpty>No framework found.</ComboboxEmpty>
          <ComboboxList>
            {(framework: (typeof frameworks)[number]) => (
              <ComboboxItem key={framework.value} value={framework}>
                {framework.label}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  )
}

bunx --bun @seamui/cli@latest add combobox

API

Prop	Type	Default	Description
items	Value[]	—	On <Combobox> — the option objects Base UI filters as you type.
itemToStringLabel	(item) => string	—	On <Combobox> — how an item echoes into the input as text.
multiple	boolean	false	On <Combobox> — select several values; compose ComboboxChips for the token UI.
value / onValueChange	Value \| Value[], (value, eventDetails) => void	—	Controlled selection on <Combobox>.
showClear	boolean	true	On <ComboboxInput> — hides the trailing × button when false.
sideOffset	number	6	On <ComboboxContent> — gap between field and popup.

<Combobox> is Base UI's Combobox.Root aliased directly, so its full generic prop surface passes through.

Notes

ComboboxList takes a render function that maps the filtered items to ComboboxItems; ComboboxEmpty stays mounted (for screen-reader announcements) and only shows content when nothing matches.
In multi-select, ComboboxChips wraps the chips + input in Base UI's InputGroup so the popup anchors to — and matches the width of — the whole well, not the bare input.
The popup condenses in/out via CSS keyed to Base UI's data-starting-style / data-ending-style, so the exit is awaited before unmount.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.