Combobox primitives

Lower-level combobox parts for custom single-select combobox layouts.

Use combobox primitives when ComboboxField is too opinionated and you need to arrange the control, popover, listbox, items, or loading row yourself.

import {
	ComboboxInput,
	ComboboxControl,
	ComboboxTextInput,
	ComboboxTrigger,
	ComboboxPopover,
	ComboboxListBox,
	ComboboxItem,
} from '@luke-ui/react/combobox-field/primitive';

Anatomy

ComboboxInput owns the React Aria ComboBox state. Render the control, popover, listbox, and items inside it. Below the small breakpoint ComboboxPopover renders as a full-width bottom tray instead of a positioned popover; see Mobile tray on the ComboboxField page for details.

<ComboboxInput defaultItems={countries} aria-label="Country">
	<ComboboxControl>
		<ComboboxTextInput />
		<ComboboxTrigger />
	</ComboboxControl>
	<ComboboxPopover>
		<ComboboxListBox>{(item) => <ComboboxItem>{item.label}</ComboboxItem>}</ComboboxListBox>
	</ComboboxPopover>
</ComboboxInput>

Size propagation

Set size on ComboboxInput to pass it to child primitives. You can override inherited size on an individual child by passing that child its own size prop.

The inherited size applies to ComboboxControl, ComboboxTextInput, ComboboxClearButton, ComboboxTrigger, ComboboxItem, and ComboboxLoadMoreItem.

Loading and empty states

Use ComboboxLoadMoreItem for infinite loading sentinels and ComboboxEmptyState for empty results.

Props

ComboboxInput

ComboboxControl

ComboboxTextInput