Skip to content
Data Input

Combobox

Headless combobox primitive for autocompletes and custom selects.

React source Core source

Combobox

Headless combobox built on React Aria ComboBox. Compose Root, Label, Input, Description, Error, Popover, ListBox, and Item for autocompletes, searchable selects, and other filterable pickers.

For the common single-select search field, use Typeahead instead.

Examples

Default
Demo.tsxtsx
import { Combobox } from '@var-ui/react';

const options = [
  { id: 'apple', label: 'Apple' },
  { id: 'plum', label: 'Plum' },
  { id: 'orange', label: 'Orange' },
];

<Combobox.Root aria-label="Favorite fruit">
  <Combobox.Label>Favorite fruit</Combobox.Label>
  <Combobox.Input placeholder="Search fruits…" clearable />
  <Combobox.Popover>
    <Combobox.ListBox items={options}>
      {(option) => (
        <Combobox.Item id={option.id} textValue={option.label}>
          {option.label}
        </Combobox.Item>
      )}
    </Combobox.ListBox>
  </Combobox.Popover>
</Combobox.Root>

Field chrome

Add helper text and validation with Description and Error.

Pick a fruit from the list.Selection is required.
Demo.tsxtsx
import { Combobox } from '@var-ui/react';

const options = [
  { id: 'apple', label: 'Apple' },
  { id: 'plum', label: 'Plum' },
  { id: 'orange', label: 'Orange' },
];

<Combobox.Root aria-label="Favorite fruit" isInvalid>
  <Combobox.Label>Favorite fruit</Combobox.Label>
  <Combobox.Input placeholder="Search fruits…" clearable />
  <Combobox.Description>Pick a fruit from the list.</Combobox.Description>
  <Combobox.Error>Selection is required.</Combobox.Error>
  <Combobox.Popover>
    <Combobox.ListBox items={options}>
      {(option) => (
        <Combobox.Item id={option.id} textValue={option.label}>
          {option.label}
        </Combobox.Item>
      )}
    </Combobox.ListBox>
  </Combobox.Popover>
</Combobox.Root>

Props

Accessibility

Built on React Aria Components. The input exposes role="combobox"; the listbox opens on focus or typing and supports keyboard navigation.