Foundation component · Forms

Combobox

Search a large option set, then choose one or more matching values.

Live playground

Choose Combobox when

The option set is too large to scan comfortably in a Select.
Use multiple selection only when every chosen value remains visible and removable.
Use Text Field when people may enter a value that is not in a known option set.

Search behavior

Describe what can be searched in the visible label or input placeholder.
Show explicit loading, empty, and no-match states inside the popup.
Base UI manages combobox semantics, active options, and keyboard navigation.

Implementation

The application supplies filtering and item content; the component provides the searchable selection structure.

import { Combobox } from "@lenso/ui/combobox";

<Combobox.Root items={labels} multiple>
  <Combobox.InputGroup>
    <Combobox.Input placeholder="Search labels…" />
  </Combobox.InputGroup>
  <Combobox.Portal>
    <Combobox.Positioner>
      <Combobox.Popup>
        <Combobox.List>
          {(label) => (
            <Combobox.Item value={label}>
              <Combobox.ItemIndicator />
              <Combobox.ItemText>{label}</Combobox.ItemText>
            </Combobox.Item>
          )}
        </Combobox.List>
      </Combobox.Popup>
    </Combobox.Positioner>
  </Combobox.Portal>
</Combobox.Root>;