# Combobox Field (/components/forms/combobox-field)



Use `ComboboxField` when someone needs to search for or choose one option from a list. It combines
an input, label, description, validation message, popover, and listbox.

apps/docs/src/examples/combobox-field/basic.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { ComboboxField } from '@luke-ui/react/combobox-field';
import { ComboboxItem } from '@luke-ui/react/primitives/combobox';

type Fruit = { id: string; label: string };

const fruits: Array<Fruit> = [
	{ id: 'apple', label: 'Apple' },
	{ id: 'orange', label: 'Orange' },
	{ id: 'banana', label: 'Banana' },
	{ id: 'grape', label: 'Grape' },
];

export default () => {
	return (
		<Box display="flex" flexDirection="column" gap="sp16" maxInlineSize="20rem">
			<ComboboxField
				defaultItems={fruits}
				defaultValue="apple"
				label="Favourite fruit"
				name="fruit"
				placeholder="Choose a fruit"
			>
				{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
			</ComboboxField>
		</Box>
	);
};
```

## Items and selection [#items-and-selection]

Use `defaultItems` for a static collection. Use `items` with `loadingState` when results load or
filter asynchronously. `ComboboxField` supports one selected value.

## Choose and clear an option [#choose-and-clear-an-option]

Pass static children or a render function to create options. The listbox marks the selected option.
When there is a selection, the field shows a clear button before the trigger. The clear button
removes the selection and input text. The clear button is unavailable for disabled and read-only
fields.

```tsx
<ComboboxField defaultItems={countries} defaultValue="ca" label="Country" name="country">
	{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
</ComboboxField>
```

## Required fields [#required-fields]

Set `isRequired` to make a selection mandatory. Use `necessityIndicator` to choose how it appears
beside the label.

apps/docs/src/examples/combobox-field/required.tsx

```tsx
import { ComboboxField } from '@luke-ui/react/combobox-field';
import { ComboboxItem } from '@luke-ui/react/primitives/combobox';

const countries = [
	{ id: 'australia', label: 'Australia' },
	{ id: 'canada', label: 'Canada' },
	{ id: 'new-zealand', label: 'New Zealand' },
	{ id: 'united-states', label: 'United States' },
];

export default () => {
	return (
		<ComboboxField
			defaultItems={countries}
			description="Choose the country where you work."
			isRequired
			label="Work location"
			name="workLocation"
			necessityIndicator="icon"
			placeholder="Choose a country"
		>
			{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
		</ComboboxField>
	);
};
```

## Validation [#validation]

Set `isRequired` or pass `validate` to check the selected value. `ComboboxField` shows its
validation message after validation fails. Pass `errorMessage` only for an error you already have,
such as one from a form library or your server. A non-empty message marks the field invalid. Read
[Validation](/docs/validation) for where messages come from, server errors, and how to write them.

apps/docs/src/examples/combobox-field/validation.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { Button } from '@luke-ui/react/button';
import { ComboboxField } from '@luke-ui/react/combobox-field';
import { ComboboxItem } from '@luke-ui/react/primitives/combobox';
import type { SubmitEvent } from 'react';

const countries = [
	{ id: 'australia', label: 'Australia' },
	{ id: 'canada', label: 'Canada' },
	{ id: 'new-zealand', label: 'New Zealand' },
	{ id: 'united-states', label: 'United States' },
];

export default () => {
	function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
		event.preventDefault();
	}

	return (
		<form onSubmit={handleSubmit}>
			<Box display="flex" flexDirection="column" gap="sp16" maxInlineSize="20rem">
				<ComboboxField
					defaultItems={countries}
					isRequired
					label="Work location"
					name="country"
					placeholder="Choose a country"
				>
					{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
				</ComboboxField>
				<Box>
					<Button type="submit">Create account</Button>
				</Box>
			</Box>
		</form>
	);
};
```

## Groups [#groups]

Use `ComboboxSection` to group related static options.

apps/docs/src/examples/combobox-field/grouped.tsx

```tsx
import { ComboboxField } from '@luke-ui/react/combobox-field';
import { ComboboxItem, ComboboxSection } from '@luke-ui/react/primitives/combobox';

export default () => {
	return (
		<ComboboxField defaultValue="apple" label="Produce" name="produce" placeholder="Choose produce">
			<ComboboxSection title="Fruit">
				<ComboboxItem id="apple">Apple</ComboboxItem>
				<ComboboxItem id="orange">Orange</ComboboxItem>
			</ComboboxSection>
			<ComboboxSection title="Vegetables">
				<ComboboxItem id="carrot">Carrot</ComboboxItem>
				<ComboboxItem id="potato">Potato</ComboboxItem>
			</ComboboxSection>
		</ComboboxField>
	);
};
```

## Size [#size]

Use `size` to set the control height and typography. Use `small` in compact layouts. `medium` is the
default.

apps/docs/src/examples/combobox-field/sizes.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { ComboboxField } from '@luke-ui/react/combobox-field';
import { ComboboxItem } from '@luke-ui/react/primitives/combobox';
import { Comparison, ComparisonItem } from '#docs/comparison';

type Option = { id: string; label: string };

const options: Array<Option> = [
	{ id: 'one', label: 'Example option' },
	{ id: 'two', label: 'Another option' },
];

export default () => {
	return (
		<Box maxInlineSize="20rem">
			<Comparison direction="vertical">
				<ComparisonItem label="Small">
					<ComboboxField
						defaultItems={options}
						label="Example field"
						name="example"
						placeholder="Choose an option"
						size="small"
					>
						{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
					</ComboboxField>
				</ComparisonItem>
				<ComparisonItem label="Medium">
					<ComboboxField
						defaultItems={options}
						label="Example field"
						name="example"
						placeholder="Choose an option"
						size="medium"
					>
						{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
					</ComboboxField>
				</ComparisonItem>
			</Comparison>
		</Box>
	);
};
```

## Async results [#async-results]

Pass `items` and `loadingState` when results load or filter asynchronously. If the list is empty
while it loads or filters, the field shows a loading indicator. An empty completed result shows “No
results”.

```tsx
<ComboboxField
	items={results}
	label="Country"
	loadingState={status}
	name="country"
	onInputChange={setQuery}
>
	{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
</ComboboxField>
```

Pass `onLoadMore` for incremental results. It adds the built-in load-more row and spinner. Use
`loadMoreItem` when that row needs custom content. `listBoxProps` configures the underlying listbox.
`popoverProps` and `menuWidth` configure the desktop popover, which mobile replaces with a tray.

## Mobile behaviour [#mobile-behaviour]

`ComboboxField` checks the device screen width, not the browser viewport width. Narrowing a desktop
browser window does not switch to the tray.

Below the `bp640` breakpoint, the field shows a button that displays the selected option. Someone
taps the button to open a modal tray with a focused search input. The tray has a fixed height and
locks page scroll. The tray motion and desktop popover fade respect reduced-motion preferences.

## Accessibility [#accessibility]

Provide a visible `label` where possible. The field passes React Aria combobox interactions and form
semantics to its input, trigger, listbox, and validation message.

## Related components [#related-components]

Use the [combobox primitives](/components/primitives/combobox) when you need a custom combobox
layout.

## API [#api]

<ComponentPropsTable
  id="type-table-combobox-field.tsx-ComboboxFieldProps"
  type="{
  &#x22;id&#x22;: &#x22;combobox-field.tsx-ComboboxFieldProps&#x22;,
  &#x22;name&#x22;: &#x22;ComboboxFieldProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for `ComboboxField` (searchable single-select).&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;name&#x22;: &#x22;children&#x22;,
      &#x22;description&#x22;: &#x22;Item content for the listbox (render prop or static children).&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;ReactNode | ((item: T) => ReactNode)&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: true,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;errorMessage&#x22;,
      &#x22;description&#x22;: &#x22;Validation message for a controlled error. A non-empty message marks the field invalid.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;ReactNode&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;ReactNode&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;inputRef&#x22;,
      &#x22;description&#x22;: &#x22;Targets the persistent combobox input on desktop. On mobile it targets the tray search input\nonly while the tray is open, so it is null when the tray is closed.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Ref<HTMLInputElement> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;listBoxProps&#x22;,
      &#x22;description&#x22;: &#x22;Props forwarded to the inner listbox.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Omit<Prettify<_ComboboxListBoxProps<T>>, \&#x22;children\&#x22; | \&#x22;items\&#x22; | \&#x22;loadMoreItem\&#x22;> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;Omit<Prettify<object>, union>&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;loadingState&#x22;,
      &#x22;description&#x22;: &#x22;Async loading state used for built-in loading and empty states.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;ComboboxLoadingState | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;loadMoreItem&#x22;,
      &#x22;description&#x22;: &#x22;Optional content appended after the main collection, e.g. a load-more sentinel.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;ReactNode&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;ReactNode&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;menuWidth&#x22;,
      &#x22;description&#x22;: &#x22;Width applied to the desktop popover menu. Mobile uses the tray instead.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Property.Width<string | number> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onLoadMore&#x22;,
      &#x22;description&#x22;: &#x22;Called when the listbox reaches its load-more sentinel.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;(() => any) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;placeholder&#x22;,
      &#x22;description&#x22;: &#x22;Placeholder text shown in the input.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;popoverProps&#x22;,
      &#x22;description&#x22;: &#x22;Props forwarded to the desktop popover. Mobile uses the tray instead.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Omit<Prettify<_ComboboxPopoverProps>, \&#x22;children\&#x22;> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;Omit<Prettify<object>, \&#x22;children\&#x22;>&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;size&#x22;,
      &#x22;description&#x22;: &#x22;Control size.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'medium'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;medium\&#x22; | \&#x22;small\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;defaultValue&#x22;,
      &#x22;description&#x22;: &#x22;The initially selected key (uncontrolled).&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Key | null | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onChange&#x22;,
      &#x22;description&#x22;: &#x22;Called when the selected value changes.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((value: Key | null) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onOpenChange&#x22;,
      &#x22;description&#x22;: &#x22;Called when the open state changes.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((isOpen: boolean) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;value&#x22;,
      &#x22;description&#x22;: &#x22;The currently selected key (controlled). Pass `null` for no selection.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Key | null | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;allowsEmptyCollection&#x22;,
      &#x22;description&#x22;: &#x22;Whether the menu can stay open when filtering leaves no items. Tray search and empty states\nneed this so typing text that matches nothing does not dismiss the overlay.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;true&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;autoFocus&#x22;,
      &#x22;description&#x22;: &#x22;Whether the combobox should receive focus on render.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;form&#x22;,
      &#x22;description&#x22;: &#x22;The `<form>` element to associate the combobox with, by id.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isRequired&#x22;,
      &#x22;description&#x22;: &#x22;Whether the combobox is required before the form can submit.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;name&#x22;,
      &#x22;description&#x22;: &#x22;The name of the combobox's hidden input, used when submitting an HTML form.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;validate&#x22;,
      &#x22;description&#x22;: &#x22;Custom validation function run against the current value. Return a message, or `true`/`null` when valid.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((value: ComboBoxValidationValue<\&#x22;single\&#x22;>) => ValidationError | true | null | undefined) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;validationBehavior&#x22;,
      &#x22;description&#x22;: &#x22;When native HTML form validation runs.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'native'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;native\&#x22; | \&#x22;aria\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;shouldFocusWrap&#x22;,
      &#x22;description&#x22;: &#x22;Whether keyboard navigation is circular.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;defaultItems&#x22;,
      &#x22;description&#x22;: &#x22;The list of ComboBox items (uncontrolled).&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Iterable<T> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;object&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;items&#x22;,
      &#x22;description&#x22;: &#x22;The list of ComboBox items (controlled).&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Iterable<T> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;object&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;inputValue&#x22;,
      &#x22;description&#x22;: &#x22;The value of the ComboBox input (controlled).&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;defaultInputValue&#x22;,
      &#x22;description&#x22;: &#x22;The default value of the ComboBox input (uncontrolled).&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onInputChange&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the ComboBox input value changes.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((value: string) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;allowsCustomValue&#x22;,
      &#x22;description&#x22;: &#x22;Whether the ComboBox allows a non-item matching input value to be set.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;menuTrigger&#x22;,
      &#x22;description&#x22;: &#x22;The interaction required to display the ComboBox menu.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'focus'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;manual\&#x22; | \&#x22;focus\&#x22; | \&#x22;input\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;disabledKeys&#x22;,
      &#x22;description&#x22;: &#x22;The item keys that are disabled. These items cannot be selected, focused, or otherwise\ninteracted with.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Iterable<Key> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;object&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onFocus&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the element receives focus.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onBlur&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the element loses focus.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onFocusChange&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when the element's focus status changes.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((isFocused: boolean) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onKeyDown&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a key is pressed.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: KeyboardEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;onKeyUp&#x22;,
      &#x22;description&#x22;: &#x22;Handler that is called when a key is released.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((e: KeyboardEvent) => void) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;id&#x22;,
      &#x22;description&#x22;: &#x22;The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-label&#x22;,
      &#x22;description&#x22;: &#x22;Defines a string value that labels the current element.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-labelledby&#x22;,
      &#x22;description&#x22;: &#x22;Identifies the element (or elements) that labels the current element.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-describedby&#x22;,
      &#x22;description&#x22;: &#x22;Identifies the element (or elements) that describes the object.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;aria-details&#x22;,
      &#x22;description&#x22;: &#x22;Identifies the element (or elements) that provide a detailed, extended description for the\nobject.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;defaultFilter&#x22;,
      &#x22;description&#x22;: &#x22;The filter function used to determine if an option should be included in the combo box list.\nBy default, a language-sensitive \&#x22;contains\&#x22; filter from `useFilter` is used.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;((textValue: string, inputValue: string) => boolean) | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;function&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;formValue&#x22;,
      &#x22;description&#x22;: &#x22;Whether the text or key of the selected item is submitted as part of an HTML form. When\n`allowsCustomValue` is `true`, this option does not apply and the text is always submitted.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'key'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;text\&#x22; | \&#x22;key\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;render&#x22;,
      &#x22;description&#x22;: &#x22;Overrides the default DOM element with a custom render function.\nThis allows rendering existing components with built-in styles and behaviors\nsuch as router links, animation libraries, and pre-styled components.\n\nRequirements:\n\n- You must render the expected element type (e.g. if `<button>` is expected, you cannot render an\n  `<a>`).\n- Only a single root DOM element can be rendered (no fragments).\n- You must pass through props and ref to the underlying DOM element, merging with your own prop\n  as appropriate.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;DOMRenderFunction<\&#x22;div\&#x22;, ComboBoxRenderProps> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;DOMRenderFunction<\&#x22;div\&#x22;, object>&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;slot&#x22;,
      &#x22;description&#x22;: &#x22;A slot name for the component. Slots allow the component to receive props from a parent\ncomponent. An explicit `null` value indicates that the local props completely override all\nprops received from a parent.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | null | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;ref&#x22;,
      &#x22;description&#x22;: &#x22;Forwarded to the combobox root element.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;Ref<HTMLDivElement> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isDisabled&#x22;,
      &#x22;description&#x22;: &#x22;Whether the combobox is disabled.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isReadOnly&#x22;,
      &#x22;description&#x22;: &#x22;Whether the combobox is read-only.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;description&#x22;,
      &#x22;description&#x22;: &#x22;Optional helper text shown below the control.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;ReactNode&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;ReactNode&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;label&#x22;,
      &#x22;description&#x22;: &#x22;Label content shown above the control.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;ReactNode&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;ReactNode&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;necessityIndicator&#x22;,
      &#x22;description&#x22;: &#x22;Label necessity style.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'icon'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;label\&#x22; | \&#x22;icon\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`ComboboxFieldProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>