Combobox

Searchable list for picking from known options. Prefer combobox when users need to filter a longer set.

Examples

Fruit

Multiple

Overview

Combobox pairs an input with a filtered popup list. Pass items on the root and render list rows from the list render function. Use Select when filtering is not needed.

tsx

import {
  Combobox,
  ComboboxInputGroup,
  ComboboxInput,
  ComboboxTrigger,
  ComboboxPortal,
  ComboboxPositioner,
  ComboboxPopup,
  ComboboxEmpty,
  ComboboxList,
  ComboboxItem,
} from "@standard-ui/react"

const fruits = ["Apple", "Banana", "Cherry"]

<Combobox items={fruits}>
  <ComboboxInputGroup>
    <ComboboxInput placeholder="Search fruit…" />
    <ComboboxTrigger />
  </ComboboxInputGroup>
  <ComboboxPortal>
    <ComboboxPositioner>
      <ComboboxPopup>
        <ComboboxEmpty>No fruits found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </ComboboxPositioner>
  </ComboboxPortal>
</Combobox>

Usage

Items

Provide an items array so filtering and empty states work. Item values must match what you pass to each ComboboxItem.

tsx

<Combobox items={fruits}>
  {/* input group + popup */}
</Combobox>

Anatomy

tsx

Combobox
  ComboboxInputGroup
    ComboboxInput
    ComboboxTrigger
  ComboboxPortal
    ComboboxPositioner
      ComboboxPopup
        ComboboxEmpty
        ComboboxList
          ComboboxItem

API

Root accepts Base UI Combobox props. Common props and parts:

Prop / part	Type	Default	Description
items	Value[]	—	Options used for filtering and list rendering.
defaultValue	Value \| null	—	Uncontrolled initial selection.
value	Value \| null	—	Controlled selection.
multiple	boolean	false	Allows selecting more than one item.
ComboboxInput	—	—	Filter field; label it or set aria-label.
ComboboxEmpty	—	—	Shown when the filtered list has no matches.