Combobox

Allows the user to browse, search and make a single selection from a large list of values.

ComboboxProps

Prop	Type	Required	Default	Description
`data`	`DataAttributeMap`	—	—	Data attributes for the combobox.
`disableAutoSelectSingleOption`	`boolean`	—	—	When true, prevent fast mode from highlighting the only item.
`environment`	`Environment`	—	—	This prop is only useful if you're rendering the combobox within a different window context from where your JavaScript is running; for example, an iframe or a shadow-root.
`focusOnMount`	`FocusOnMountBehaviour` `focus`\|`focus-and-open`	—	—	Make sure only a single input on the page needs focusOnMount or you're see flickering and random focus behaviour.
`footerItem`	`Item`	—	—	The footer item that sticks at the bottom of all the options.
`footerItemHeight`	`number`	—	—	Provide the height, in pixels, for the footer item. If this is not provided, the itemHeight is used.
`getMessageText`	`(status: ComboboxItemsStatus, inputValue: string) => string`	—	—	The message text displayed to the user when no items are available.
`inputRef`	`Ref<HTMLInputElement>`	—	—	—
`inputValue`	`string`	Yes	—	The value of the input.
`itemHeight`	`ItemHeight`	—	—	Provide the height, in pixels, of each item in the list.
`items`	`Item[]`	Yes	—	Array of items for the user to select from.
`loadingState`	`ComboboxLoadingState` `loading`\|`loadingMore`\|`error`\|`idle`	—	—	The current loading state of the combobox. Use this prop when fetching items asynchronously from the server.
`menuWidth`	`number`	—	—	Provide fixed width for the menu dialog for situations where menu items are clipped due to limited horizontal real estate.
`mode`	`ComboboxMode` `cell`\|`field`	—	—	mode = cell is for when the combobox is used inside an AG grid cell editor. It has a few quirky behaviours that are managed by this flag. You should never use this flag outside of an AG grid cell and don't add any behaviours based on this flag unless they're directly related to AG grid cell editing. In the future if this flag spreads too much, consider creating a separate component specifically for AG grid cell editing. mode = field is basically when mode !== cell.
`onChange`	`( value: Nullable<Item>, allChanges: UseComboboxStateChange<Item> ) => void`	Yes	—	Called when an item is selected.
`onClear`	`() => void`	—	—	Optionally allow users to remove their selection. The callback should also clear the input and reset the items.
`onInputChange`	`( inputValue: string, allChanges: UseComboboxStateChange<Item> ) => void`	Yes	—	Called whenever the input value changes. Use to filter the items.
`onUserInteractionButNoDataChange`	`( changes: UseComboboxStateChange<Item> ) => void`	—	—	When the user clicks or selects an item that is already selected, there is no onChange event fired because nothing changed in terms of data but we might still want to do something imperatively like move focus etc. No data is passed to this callback because the consumer should already have it, this is about merely the fact that the user did something. If you need data in this callback you're probably doinb something wrong
`readOnly`	`boolean`	—	—	When true, the current value is rendered as text
`size`	`ComboboxInputSize` `xsmall`\|`small`\|`medium`	—	`medium`	The size of the combobox. Influences the input controls and the default item height.
`stateReducer`	`( state: UseComboboxState<Item>, actionAndChanges: UseComboboxStateChangeOptions<Item> ) => Partial<UseComboboxState<Item>>`	—	—	Called whenever internal state changes. Use for fine-grained control of component internals. Must be a pure function (no side-effects). Must remain the same (by reference) between renders: preferably declared outside of the component, or with `React.useCallback` if necessary.
`stickyIndexes`	`Array<number>`	—	—	Enable stick behaviour for group labels. The incices must be from the final list that is rendered.
`value`	`Nullable<Item>`	Yes	—	The selected item.
Also accepts `ItemTransformProps<Item>`, `ValidInputProps`, `ModeProps`

Combobox — Guidelines

When to use Combobox versus Autocomplete or SelectInput.

Config Menu

The ConfigMenu allows users to interact with a portion of your app's configuration, typically data tables.