Combobox

An input with a filterable listbox for selecting one or multiple options.

Usage

import { Combobox, Portal } from "@elemnts-ui/react";

<Combobox.Root collection={collection}>
  <Combobox.Label>Framework</Combobox.Label>

  <Combobox.Control>
    <Combobox.Input placeholder="Select framework" />
    <Combobox.IndicatorGroup>
      <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      <Combobox.Trigger>Open</Combobox.Trigger>
    </Combobox.IndicatorGroup>
  </Combobox.Control>

  <Portal>
    <Combobox.Positioner>
      <Combobox.Content>
        <Combobox.List>
          {collection.items.map((item) => (
            <Combobox.Item key={item.value} item={item}>
              <Combobox.ItemText>{item.label}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          ))}
        </Combobox.List>
        <Combobox.Empty>No results found</Combobox.Empty>
      </Combobox.Content>
    </Combobox.Positioner>
  </Portal>
</Combobox.Root>;

Disabled

Use the disabled prop to disable the entire combobox.

Multiple

Use the multiple prop to allow users to select more than one item from the list.

Highlight

This example shows how to compose the Combobox and Highlight components to emphasize matching text in search results.

API Reference

ComboboxRoot

Prop	Type	Default
disabled	`boolean`	`false`
closeOnSelect	`boolean`	`false`
alwaysSubmitOnEnter	`boolean`	`false`
allowCustomValue	`boolean`	`false`
collection	`MaybeFunction<ListCollection<T>>`	-
onFocusOutside	`(details: FocusOutsideEvent) => void`	-
onSelect	`(details: SelectionDetails) => void`	-
onPointerDownOutside	`(details: PointerDownOutsideEvent) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
open	`boolean`	`false`
onOpenChange	`(details: OpenChangeDetails) => void`	-
openOnClick	`boolean`	`false`
openOnKeyPress	`boolean`	`false`
placeholder	`string`	-
name	`string`	-
invalid	`boolean`	`false`
inputBehavior	`none` \| `autocomplete` \| `autohighlight`	`none`
navigate	`(details: NavigateDetails) => void`	-
onInteractOutside	`(details: InteractOutsideEvent) => void`	-
onInputValueChange	`(details: InputValueChangeDetails) => void`	-
onHighlightChange	`(details: HighlightChangeDetails) => void`	-
asChild	`boolean`	-