# Combobox Field (/docs/components/forms/combobox-field)
Use `ComboboxField` for a single-select combobox with label, description, error, popover, listbox,
and optional async loading built in.
## Best practices [#best-practices]
| Guidance | Practices |
| -------- | ------------------------------------------------------------------------------------------------------- |
| Do | Use `defaultItems` for a static list. Use `items` with `loadingState` when options load asynchronously. |
| Don't | Use `ComboboxField` for multi-select. It is single-select only in v1. |
## API shape [#api-shape]
* Root props follow React Aria `ComboBox` naming.
* Composed convenience props include `label`, `description`, `errorMessage`, `necessityIndicator`,
`size`, and `placeholder`.
* `children` renders items from `items` or `defaultItems`.
* `listBoxProps` and `loadMoreItem` are lower-level escape hatches.
## Selection indicators [#selection-indicators]
The selected option shows a checkmark in the listbox. When the control has a selection, it shows a
clear button before the trigger. Pressing the clear button clears the selection and input text.
The clear button is omitted when the field is disabled or read-only.
```tsx
{(item) => {item.label}}
```
## Required fields [#required-fields]
Use `isRequired` with `necessityIndicator` to show that the field is mandatory.
## Validation [#validation]
Pass field-level validation through React Aria `Form`. Use `errorMessage` to render the validation
message.
```tsx
import { Form } from 'react-aria-components';
;
```
## Grouped options [#grouped-options]
Use `ComboboxSection` to group related options inside the listbox.
## Async options [#async-options]
Pass `loadingState` for built-in loading and empty states. Control the option collection with
`items`.
```tsx
{(item) => {item.label}}
```
## Infinite scroll [#infinite-scroll]
Use `onLoadMore` for automatic sentinel-based loading, or `loadMoreItem` when you need full control
over the load-more row.
```tsx
{(item) => {item.label}}
```
## Mobile tray [#mobile-tray]
Below the `small` breakpoint (640px) the popover renders as a bottom tray instead of a positioned
popover, following
[Adobe Spectrum's combobox pattern](https://react-aria.adobe.com/blog/building-a-combobox). The tray
spans the full viewport width, slides up from the bottom edge on open and back down on close, and
keeps clear of the on-screen keyboard using the
[Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API). A scrim
dims the page behind the tray, and a grab-handle affordance marks its top edge. In browsers that
support `calc-size()`, the tray keeps a usable minimum height even when the viewport is cramped,
while still hugging shorter lists instead of leaving empty space.
## Accessibility [#accessibility]
The tray's slide transition (and the desktop popover's fade) is disabled for users who request
`prefers-reduced-motion: reduce`.
## Primitive [#primitive]
Use the [combobox primitives](/docs/components/primitives/combobox) when you need a custom combobox
layout.
## Props [#props]