Combobox

You might be looking for:

• Select

  Pick one value from a short list.

• Dropdown Menu

  Commands from a button — each row runs an action.

The trigger is an Input Group — caret and clear live in the trailing addon. Inside a Field card it picks up the same control sizing as Input.

Playground

<Combobox items={["Paris", "London", "New York", "Tokyo"]}> <ComboboxInput placeholder="Search a city" aria-label="City" /> <ComboboxContent> <ComboboxEmpty>No cities found.</ComboboxEmpty> <ComboboxList> <ComboboxItem value="Paris">Paris</ComboboxItem> … </ComboboxList> </ComboboxContent></Combobox>

Usage

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

<Combobox items={["Paris", "London", "New York", "Tokyo"]}>
  <ComboboxInput placeholder="Search a city" aria-label="City" />
  <ComboboxContent>
    <ComboboxEmpty>No cities found.</ComboboxEmpty>
    <ComboboxList>
      <ComboboxItem value="Paris">Paris</ComboboxItem>
      <ComboboxItem value="London">London</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Pass showClear on ComboboxInput when the field has a value — the caret hides while clear is shown. Wrap input and list in ComboboxDialogScope when the combobox sits inside a Dialog, so the popup stays in that layer.

ComboboxChips, ComboboxChip, and ComboboxChipsInput are exported for a multi-value row. That pattern uses the chip field as the anchor, not ComboboxInput.

Props

Combobox passes every prop through to Base UI (items, value, defaultValue, onValueChange, filter, …). The input below adds props on top.

ComboboxInput

ComboboxChip

Tokens

Combobox Input reads --input-* when standalone and --field-control-* inside a Field card (it is an Input Group). Fallbacks keep apps without those tokens on the previous look. The open list uses popover colors and the shared --floating-surface-shadow elevation — not --menu-*.

Changelog

• 4 October 2026 — List frost via --popover / --popover-blur. Full notes
• 3 October 2026 — Dark field fill tracks Field (one step above the card). Full notes
• 19 August 2026 — Shared --floating-surface-shadow elevation token. Full notes
• 19 August 2026 — “You might be looking for” map to Select and Dropdown Menu. Full notes
• 19 August 2026 — Docs page added (was in the library undocumented). Full notes
• 19 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes