Combobox

Both flavors wrap Base UI's Combobox; Radix ships no combobox primitive. Typing narrows the list against the items you pass to the root, and when nothing matches the popup shows its empty state.

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/combobox.tsx. Registry items that depend on it install it automatically.

components/ui/combobox.tsx

Usage

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

const runtimes = ["AI SDK", "LangGraph", "LangChain", "Mastra"];

export function RuntimePicker() {
  return (
    <Combobox items={runtimes}>
      <ComboboxInput placeholder="Search runtimes…" />
      <ComboboxContent>
        <ComboboxEmpty>No runtimes found.</ComboboxEmpty>
        <ComboboxList>
          {(runtime: string) => (
            <ComboboxItem key={runtime} value={runtime}>
              {runtime}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

Examples

Groups

Pass an array of { value, items } groups to the root, then render each group with its own collection. Group labels use the mono eyebrow voice.

Clear and disabled

showClear shows a clear button instead of the chevron while a value is selected. A disabled combobox keeps its value visible at half opacity.

API Reference

Combobox

Wraps Base UI's Combobox root and accepts its props.

ComboboxProps

items ?: readonly T[] | readonly Group<T>[]: The options to filter and list. Either a flat array or an array of { value, items } groups.
value ?: T: Controlled selected value.
onValueChange ?: (value: T, details) => void: Called when the selection changes.
defaultValue ?: T: Uncontrolled initial selection.
disabled : boolean = false: Prevents interaction.

ComboboxInput

The field that anchors the popup and receives the filter text.

ComboboxInputProps

showTrigger : boolean = true: Renders the chevron button at the end of the field.
showClear : boolean = false: Adds a clear button that replaces the chevron while a value is selected.
placeholder ?: string: Hint shown while the field is empty.

ComboboxContent

The positioned popup that holds the list.

ComboboxContentProps

side : "top" | "right" | "bottom" | "left" = "bottom": Which side of the field the popup opens on.
align : "start" | "center" | "end" = "start": Alignment against the field.
sideOffset : number = 6: Distance from the field in pixels.

ComboboxItem

ComboboxItemProps

value : T: The value this option represents.
disabled : boolean = false: Prevents selecting this option.