# Combobox primitives (/docs/components/primitives/combobox)
Use combobox primitives when [`ComboboxField`](/docs/components/forms/combobox-field) is too
opinionated and you need to arrange the control, popover, listbox, items, or loading row yourself.
```tsx
import {
ComboboxInput,
ComboboxControl,
ComboboxTextInput,
ComboboxTrigger,
ComboboxPopover,
ComboboxListBox,
ComboboxItem,
} from '@luke-ui/react/combobox-field/primitive';
```
## Anatomy [#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](/docs/components/forms/combobox-field#mobile-tray) on the `ComboboxField` page for
details.
```tsx
{(item) => {item.label}}
```
## Size propagation [#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 [#loading-and-empty-states]
Use `ComboboxLoadMoreItem` for infinite loading sentinels and `ComboboxEmptyState` for empty
results.
## Props [#props]
### ComboboxInput [#comboboxinput]
### ComboboxControl [#comboboxcontrol]
### ComboboxTextInput [#comboboxtextinput]
### ComboboxClearButton [#comboboxclearbutton]
### ComboboxTrigger [#comboboxtrigger]
### ComboboxPopover [#comboboxpopover]
### ComboboxListBox [#comboboxlistbox]
### ComboboxItem [#comboboxitem]
### ComboboxLoadMoreItem [#comboboxloadmoreitem]
### ComboboxSection [#comboboxsection]
### ComboboxEmptyState [#comboboxemptystate]