Combobox

Use Combobox when the user searches, highlights, and selects structured options. Use Popover only for generic floating panels.

Preview#

Anatomy#

import {
  Combobox,
  ComboboxClear,
  ComboboxContent,
  ComboboxControl,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
  ComboboxTriggerIndicator,
  Field,
  FieldLabel,
} from "raft-ui";

<Combobox>
  <Field>
    <FieldLabel />
    <ComboboxControl>
      <ComboboxInput />
      <ComboboxClear />
      <ComboboxTriggerIndicator />
    </ComboboxControl>
  </Field>
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="option">
        <ComboboxItemIndicator />
      </ComboboxItem>
    </ComboboxList>
    <ComboboxEmpty />
  </ComboboxContent>
</Combobox>

Usage#

Button trigger#

Load options#

Async select#

Custom trigger#

API#WIP

Combobox#

...props
Base UI Combobox.Root.Props
Owns selected value, input value, filtering, highlighted item, Escape, and Enter selection.

ComboboxLabel#

...props
Base UI Combobox.Label.Props
Accessible label for the combobox.

ComboboxControl#

...props
Base UI Combobox.InputGroup.Props
Input-first control surface. Use it when the visible combobox trigger should be searchable; plain SVG children get the component's default icon size.

ComboboxTrigger#

render
ReactElement | (props, state) => ReactElement
Replaces the trigger element entirely. When provided, the default Button and its recipe styles are skipped; pass event and aria props to your own element.
...props
Base UI Combobox.Trigger.Props
Default trigger renders an outline md Button for picker-style filters where the search input lives inside the popup.

ComboboxValue#

...props
Base UI Combobox.Value.Props
Displayed value slot inside the trigger.

ComboboxTriggerCount#

...props
StyledProps<ComponentPropsWithRef<"span">>
Count badge shown next to the trigger value.

ComboboxTriggerIndicator#

...props
StyledProps<ComponentPropsWithRef<"span">>
Chevron or custom indicator inside the trigger.

ComboboxInput#

...props
Base UI Combobox.Input.Props
Search input. Supports password-manager suppression for compact filter panels.

ComboboxInputGroup#

...props
Base UI Combobox.InputGroup.Props
Layout wrapper grouping the input with trigger actions.

ComboboxClear#

...props
Base UI Combobox.Clear.Props
Clears the current input and selected value through the primitive.

ComboboxContent#

...props
Base UI Popup + Positioner props
Portaled popup shell. Defaults to side=bottom, align=start, sideOffset=4, and local collision props.

ComboboxPortal#

container
HTMLElement | RefObject | null
Custom portal container for framed previews or contained overlays.
...props
Base UI Combobox.Portal.Props
Portals the popup to the body or a custom container.

ComboboxHeader#

...props
div props
Header row for picker titles and trailing actions.

ComboboxSeparator#

...props
div props
Horizontal divider between composed combobox regions.

ComboboxPopup#

...props
div props
Unpositioned popup shell for advanced static rendering. Prefer ComboboxContent for trigger-anchored pickers.

ComboboxList#

...props
Base UI Combobox.List.Props
Renders filtered items, usually through the list render function.

ComboboxEmpty#

...props
Base UI Combobox.Empty.Props
Empty-state message shown when no options match.

ComboboxGroup#

...props
Base UI Combobox.Group.Props
Group container for related options.

ComboboxGroupLabel#

...props
Base UI Combobox.GroupLabel.Props
Group heading inside ComboboxGroup.

ComboboxRow#

...props
Base UI Combobox.Row.Props
Row layout for composite options.

ComboboxItem#

...props
Base UI Combobox.Item.Props
Selectable option row. Selection/highlight state is exposed through data attributes.

ComboboxItemIndicator#

...props
Base UI Combobox.ItemIndicator.Props
Selected-state indicator for single and multiple selection.

ComboboxCollection#

...props
Base UI Combobox.Collection.Props
Collects items for keyboard navigation and filtering.

ComboboxChips#

...props
Base UI Combobox.Chips.Props
Wrap container for selected-value chips.

ComboboxChip#

...props
Base UI Combobox.Chip.Props
Single selected-value chip.

ComboboxChipRemove#

...props
Base UI Combobox.ChipRemove.Props
Dismiss control inside a selected-value chip.