Combobox

An input combined with a list of predefined items to select.

Installation


pnpm dlx shadcn@latest add @lumi-ui/combobox

Anatomy

<Combobox>
  <ComboboxTrigger />
  <ComboboxInputGroup />
 
  <ComboboxChips>
    <ComboboxChip />
  </ComboboxChips>
 
  <ComboboxContent>
    <ComboboxStatus />
    <ComboboxEmpty />
    <ComboboxList>
      <ComboboxRow>
        <ComboboxItemContent />
      </ComboboxRow>
      <ComboboxSeparator />
      <ComboboxGroup>
        <ComboboxGroupLabel />
      </ComboboxGroup>
      <ComboboxCollection />
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Features

With Clear Button, Trigger Button and Icon

Use ComboboxTrigger instead of ComboboxInputGroup to place the input inside the popup. Apply variant="ghost" on ComboboxInput to remove the border and focus state.

Change Indicator Icon and Position

Grouped

positionerAnchor

By default, the ComboboxContent anchors itself to the ComboboxTrigger. To make the popup match the width of the outer container, manually set that container as the anchor.

Cookbook

With Scroll Area

Multiple Selection

Creatable

Async Items (Single)

Async Items (Multiple)

Customization

Form Integration

API Reference

ComboboxInputGroup

A high-level input component that combines the ComboboxInput, Icon ,ComboboxClear, and ComboboxTrigger into a single styled element.

Prop	Type	Description
`showTrigger`	`boolean`	Whether to show the trigger icon.
`showClear`	`boolean`	Whether to show the clear icon.
`addonIcon`	`React.ReactNode`	Whether to show the addon icon.
`variant`	`"ghost" \| "default" \| "transparent"`	The visual variant of the input group.
`inputSize`	`"default" \| "sm" \| "lg"`	The size of the input.
`className`	`string`	Additional CSS classes.
`...props`	`ComboboxInput.Props`	Passes all other props to the underlying `ComboboxInput.Props`.

ComboboxContent

A high-level container component that combines the ComboboxPortal, ComboboxPositioner, and ComboboxPopup into a single styled element for the dropdown content.

Prop	Type	Description
`sideOffset`	`number`	The offset distance from the anchor.
`align`	`"start" \| "center" \| "end"`	The alignment relative to the anchor.
`matchAnchorWidth`	`boolean`	Whether the popup width matches the anchor width.
`positionerAnchor`	`React.RefObject<HTMLDivElement \| null>`	Ref passed to the positioner for custom anchoring.
`className`	`string`	Additional CSS classes.
`...props`	`ComboboxPopup.Props`	Passes all other props to the underlying `ComboboxPopup.Props`.

ComboboxItemContent

A high-level item component that combines the Item and ItemIndicator into a single styled element with configurable icon positioning.

Prop	Type	Description
`indicatorPlacement`	`"start" \| "end" \| "none"`	The position of the indicator icon relative to the content.
`indicatorIcon`	`React.ReactNode`	The icon to render as the item indicator.
`className`	`string`	Additional CSS classes.
`...props`	`ComboboxItem.Props`	Passes all other props to the underlying `ComboboxItem.Props`.