AutoComplete API

API documentation for AutoComplete component

AutoCompleteRoot#

Props#

Defines valid properties in AutoComplete component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteRootInstance) => ReactNode)	null	The children to render.
invalid	boolean	null	When present, it specifies that the component should have invalid state style.
variant	"outlined" \| "filled"	null	Specifies the input variant of the component.
fluid	boolean	null	Spans 100% width of the container when enabled.
disabled	boolean	false	When present, it specifies that the element should be disabled.
size	"small" \| "large"	null	Defines the size of the checkbox.
onValueChange	(event: AutoCompleteValueChangeEvent) => void	null	Callback fired when the autocomplete's input value is changed.
onInputValueChange	(event: AutoCompleteInputValueChangeEvent) => void	null	Callback fired when the autocomplete's input value is changed.
onComplete	(event: AutoCompleteCompleteEvent) => void	null	Callback fired when the autocomplete's search is completed.
value	unknown	null	The current selected value of the autocomplete.
defaultValue	unknown	null	The default selected value when used in uncontrolled mode.
inputValue	string	null	The current input text value (controlled).
defaultInputValue	string	null	The default input text value when used in uncontrolled mode.
open	boolean	null	Controlled open state of the input tags overlay.
defaultOpen	boolean	null	Default open state for uncontrolled mode.
options	unknown[]	null	An array of options to display.
optionKey	string	null	Unique key for each option.
optionLabel	string	null	Label field for each option.
optionValue	string	null	Value field for each option.
optionDisabled	string	null	Field to check if an option is disabled.
optionGroupLabel	string	null	Label field for option groups.
optionGroupChildren	string	null	Field that contains the children options in a group.
locale	string	null	The locale to use for localization.
multiple	boolean	null	When present, allows selecting multiple options.
metaKeySelection	boolean	null	When enabled, requires holding the meta key to select/deselect.
autoOptionFocus	boolean	null	When enabled, the focused option is automatically highlighted.
selectOnFocus	boolean	null	When enabled, the focused option is automatically selected.
focusOnHover	boolean	null	When enabled, the focused option changes on hover.
minLength	number	null	Minimum number of characters to initiate a search.
delay	number	null	Delay between keystrokes to wait before sending a query.
appendTo	HTMLElement \| "body" \| "self"	null	A valid query selector or an HTMLElement to specify where the overlay gets attached.
forceSelection	boolean	null	When present, it specifies that an input field must be filled out before submitting the form.
completeOnFocus	boolean	null	When enabled, a search query is sent on focus.
tabIndex	number	null	Index of the element in tabbing order.
name	string	null	Name of the input element.
required	boolean	null	When present, it specifies that an input field is required.
dropdownMode	"current" \| "blank"	null	Specifies the behavior of the dropdown button.
onOpenChange	(event: useAutoCompleteOpenChangeEvent) => void	null	Callback to invoke when the open state changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in AutoComplete component.

name	type	default	description
value	unknown	null	The current selected value.
inputValue	string	null	The current input text value.
opened	boolean	null	Whether the overlay is open.
focused	boolean	null	Whether the input is focused.
focusedOptionIndex	number	null	The index of the currently focused option. -1 if no option is focused.
searching	boolean	null	Whether a search is in progress.
anchorEl	HTMLElement	null	The anchor (input) element.
positionerEl	HTMLDivElement	null	The positioner element.

Exposes#

Defines the methods and properties exposed by AutoComplete component.

name	type	default	description
state	useAutoCompleteState	null	The state of the useAutoComplete.
listbox	useListboxInstance	null	The listbox instance used internally for option management.
presence	{ present: boolean; exiting: boolean; mounted: boolean; ref: RefObject<HTMLElement> }	null	The presence state for managing mount/unmount transitions.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input element.
setAnchorRef	(node: HTMLElement) => void	null	Sets the anchor (input) element reference.
setPositionerRef	(node: HTMLDivElement) => void	null	Sets the positioner element reference.
onChange	(event: ChangeEvent<HTMLInputElement>) => void	null	Callback when the input value changes.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Callback when the input receives focus.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Callback when the input loses focus.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Callback when a key is pressed in the input.
onTriggerClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Callback when the dropdown trigger is clicked.
onClearClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Callback when the clear button is clicked.
onOptionSelect	(event: { originalEvent: SyntheticEvent; value: unknown }) => void	null	Callback when an option is selected.
getFocusedOptionId	() => string	null	Gets the ID of the currently focused option for aria-activedescendant.
hasValue	() => boolean	null	Returns whether the autocomplete has a selected value.

Events#

AutoCompleteValueChangeEvent

Event fired when the autocomplete's value changes.

name	type	description
value	string	The new value of the autocomplete.
option	unknown	The selected option.
originalEvent	SyntheticEvent	The original event that triggered the change.

AutoCompleteInputValueChangeEvent

Event fired when the autocomplete's input value changes.

name	type	description
query	string	The current input value.
originalEvent	SyntheticEvent	The original event that triggered the change.

AutoCompleteCompleteEvent

Event fired when the autocomplete's search is completed.

name	type	description
query	string	The current query string.
originalEvent	SyntheticEvent	The original event that triggered the complete.

AutoCompleteOpenChangeEvent

Event object for the onOpenChange callback.

name	type	description
value	boolean	The new value of the autocomplete's open state.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoComplete component.

name	type	default	description
root	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
trigger	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the trigger's DOM element.
pcInputText	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the pcInputText's DOM element.
portal	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the portal's DOM element.
positioner	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the positioner's DOM element.
panel	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.
pcListbox	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the pcListbox's DOM element.
options	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the options' DOM element.
option	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the option's DOM element.
clearIcon	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the clearIcon's DOM element.
selection	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the selection's DOM element.
header	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
footer	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.
empty	AutoCompleteRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the empty's DOM element.

Types#

Instance

Instance of AutoCompleteRoot component.

values
ComponentInstance<AutoCompleteRootProps, AutoCompleteRootState, AutoCompleteRootExposes>

AutoCompleteValue#

Props#

Defines valid properties in AutoCompleteValue component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteValueInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteValueInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteValuePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteValueInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteValue component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteValue component.

name	type	default	description
root	AutoCompleteValuePassThroughType<HTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteValue component.

values
ComponentInstance<AutoCompleteValueProps, AutoCompleteValueState, AutoCompleteValueExposes>

AutoCompleteTrigger#

Props#

Defines valid properties in AutoCompleteTrigger component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteTriggerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteTriggerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteTriggerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteTriggerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteTrigger component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteTrigger component.

name	type	default	description
root	AutoCompleteTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteTrigger component.

values
ComponentInstance<AutoCompleteTriggerProps, AutoCompleteTriggerState, AutoCompleteTriggerExposes>

AutoCompletePortal#

Props#

Defines valid properties in AutoCompletePortal component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	(CSSProperties \| ((instance?: PortalInstance) => CSSProperties)) & (CSSProperties \| ((instance?: AutoCompletePortalInstance) => CSSProperties))	null	The style to apply to the component.
className	(string \| ((instance?: PortalInstance) => string)) & (string \| ((instance?: AutoCompletePortalInstance) => string))	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	PortalPassThrough & Record<PropertyKey, unknown> & AutoCompletePortalPassThrough	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	(ReactNode \| ((instance: PortalInstance) => ReactNode)) & (ReactNode \| ((instance: AutoCompletePortalInstance) => ReactNode))	null	The children to render.
element	ReactNode	null	The element to be rendered as the portal.
appendTo	HTMLElement \| "body" \| "self"	'body'	The DOM element where the portal should be appended to.
visible	boolean	false	Whether the portal is visible or not.
onMounted	() => void	null	Callback function to invoke when the portal is mounted.
onUnmounted	() => void	null	Callback function to invoke when the portal is unmounted.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompletePortal component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompletePortal component.

name	type	default	description
root	AutoCompletePortalPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompletePortal component.

values
ComponentInstance<AutoCompletePortalProps, AutoCompletePortalState, AutoCompletePortalExposes>

AutoCompletePositioner#

Props#

Defines valid properties in AutoCompletePositioner component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompletePositionerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompletePositionerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompletePositionerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompletePositionerInstance) => ReactNode)	null	The children to render.
side	SideType	null	The side of the positioner.
align	AlignType	null	The align of the positioner.
sideOffset	number	null	The side offset of the positioner.
alignOffset	number	null	The align offset of the positioner.
flip	boolean	null	Whether to flip the positioner.
shift	boolean	null	Whether to shift the positioner.
hideWhenDetached	boolean	null	Whether to hide the positioner when detached.
anchor	HTMLElement	null	The anchor element.
content	HTMLDivElement	null	The content element.
arrow	HTMLDivElement	null	The arrow element.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompletePositioner component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompletePositioner component.

name	type	default	description
root	AutoCompletePositionerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompletePositioner component.

values
ComponentInstance<AutoCompletePositionerProps, AutoCompletePositionerState, AutoCompletePositionerExposes>

AutoCompletePanel#

Props#

Defines valid properties in AutoCompletePanel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompletePanelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompletePanelInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompletePanelPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompletePanelInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompletePanel component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompletePanel component.

name	type	default	description
root	AutoCompletePanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompletePanel component.

values
ComponentInstance<AutoCompletePanelProps, AutoCompletePanelState, AutoCompletePanelExposes>

AutoCompleteList#

Props#

Defines valid properties in AutoCompleteList component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteListInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteListInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteListPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteListInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteList component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteList component.

name	type	default	description
root	AutoCompleteListPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteList component.

values
ComponentInstance<AutoCompleteListProps, AutoCompleteListState, AutoCompleteListExposes>

AutoCompleteOptions#

Props#

Defines valid properties in AutoCompleteOptions component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteOptionsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteOptionsInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteOptionsPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteOptionsInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteOptions component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.
listbox	ListboxRootInstance	null	The Listbox component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteOptions component.

name	type	default	description
root	AutoCompleteOptionsPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteOptions component.

values
ComponentInstance<AutoCompleteOptionsProps, AutoCompleteOptionsState, AutoCompleteOptionsExposes>

AutoCompleteOption#

Props#

Defines valid properties in AutoCompleteOption component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteOptionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteOptionInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteOptionPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteOptionInstance) => ReactNode)	null	The children to render.
option	unknown	null	The option data.
index	number	null	The index of the option.
selected	boolean	null	Whether the option is selected.
focused	boolean	null	Whether the option is focused.
disabled	boolean	null	Whether the option is disabled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteOption component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.
listbox	ListboxRootInstance	null	The Listbox component instance.
optionInstance	ListboxOptionInstance	null	The ListboxOption component instance.
option	unknown	null	The option data object.
index	number	null	The index of the option in the list.
group	boolean	null	Whether this option is a group header.
selected	boolean	null	Whether this option is currently selected.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteOption component.

name	type	default	description
root	AutoCompleteOptionPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteOption component.

values
ComponentInstance<AutoCompleteOptionProps, AutoCompleteOptionState, AutoCompleteOptionExposes>

AutoCompleteClearIcon#

Props#

Defines valid properties in AutoCompleteClearIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteClearIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteClearIconInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteClearIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteClearIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteClearIcon component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteClearIcon component.

name	type	default	description
root	AutoCompleteClearIconPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteClearIcon component.

values
ComponentInstance<AutoCompleteClearIconProps, AutoCompleteClearIconState, AutoCompleteClearIconExposes>

AutoCompleteSelection#

Props#

Defines valid properties in AutoCompleteSelection component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteSelectionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteSelectionInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteSelectionPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteSelectionInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteSelection component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.
listbox	ListboxRootInstance	null	The Listbox component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteSelection component.

name	type	default	description
root	AutoCompleteSelectionPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteSelection component.

values
ComponentInstance<AutoCompleteSelectionProps, AutoCompleteSelectionState, AutoCompleteSelectionExposes>

AutoCompleteHeader#

Props#

Defines valid properties in AutoCompleteHeader component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteHeaderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteHeaderInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteHeaderPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteHeaderInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteHeader component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteHeader component.

name	type	default	description
root	AutoCompleteHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteHeader component.

values
ComponentInstance<AutoCompleteHeaderProps, AutoCompleteHeaderState, AutoCompleteHeaderExposes>

AutoCompleteFooter#

Props#

Defines valid properties in AutoCompleteFooter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteFooterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteFooterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteFooterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteFooterInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteFooter component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteFooter component.

name	type	default	description
root	AutoCompleteFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteFooter component.

values
ComponentInstance<AutoCompleteFooterProps, AutoCompleteFooterState, AutoCompleteFooterExposes>

AutoCompleteEmpty#

Props#

Defines valid properties in AutoCompleteEmpty component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AutoCompleteEmptyInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AutoCompleteEmptyInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AutoCompleteEmptyPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AutoCompleteEmptyInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AutoCompleteEmpty component.

name	type	default	description
autocomplete	AutoCompleteRootInstance	null	The AutoComplete component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AutoCompleteEmpty component.

name	type	default	description
root	AutoCompleteEmptyPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AutoCompleteEmpty component.

values
ComponentInstance<AutoCompleteEmptyProps, AutoCompleteEmptyState, AutoCompleteEmptyExposes>

useAutoComplete#

Props#

Props for the useAutoComplete hook.

name	type	default	description
value	unknown	null	The current selected value of the autocomplete.
defaultValue	unknown	null	The default selected value when used in uncontrolled mode.
inputValue	string	null	The current input text value (controlled).
defaultInputValue	string	null	The default input text value when used in uncontrolled mode.
open	boolean	null	Controlled open state of the input tags overlay.
defaultOpen	boolean	null	Default open state for uncontrolled mode.
options	unknown[]	null	An array of options to display.
optionKey	string	null	Unique key for each option.
optionLabel	string	null	Label field for each option.
optionValue	string	null	Value field for each option.
optionDisabled	string	null	Field to check if an option is disabled.
optionGroupLabel	string	null	Label field for option groups.
optionGroupChildren	string	null	Field that contains the children options in a group.
disabled	boolean	null	When present, it specifies that the component should be disabled.
locale	string	null	The locale to use for localization.
multiple	boolean	null	When present, allows selecting multiple options.
metaKeySelection	boolean	null	When enabled, requires holding the meta key to select/deselect.
autoOptionFocus	boolean	null	When enabled, the focused option is automatically highlighted.
selectOnFocus	boolean	null	When enabled, the focused option is automatically selected.
focusOnHover	boolean	null	When enabled, the focused option changes on hover.
minLength	number	null	Minimum number of characters to initiate a search.
delay	number	null	Delay between keystrokes to wait before sending a query.
appendTo	HTMLElement \| "body" \| "self"	null	A valid query selector or an HTMLElement to specify where the overlay gets attached.
forceSelection	boolean	null	When present, it specifies that an input field must be filled out before submitting the form.
completeOnFocus	boolean	null	When enabled, a search query is sent on focus.
tabIndex	number	null	Index of the element in tabbing order.
name	string	null	Name of the input element.
required	boolean	null	When present, it specifies that an input field is required.
dropdownMode	"current" \| "blank"	null	Specifies the behavior of the dropdown button.
onValueChange	(event: useAutoCompleteValueChangeEvent) => void	null	Callback to invoke when the selected value changes.
onInputValueChange	(event: useAutoCompleteInputValueChangeEvent) => void	null	Callback when the input value changes.
onComplete	(event: useAutoCompleteCompleteEvent) => void	null	Callback to invoke to search for suggestions.
onOpenChange	(event: useAutoCompleteOpenChangeEvent) => void	null	Callback to invoke when the open state changes.

State#

Defines valid state in useAutoComplete.

name	type	default	description
value	unknown	null	The current selected value.
inputValue	string	null	The current input text value.
opened	boolean	null	Whether the overlay is open.
focused	boolean	null	Whether the input is focused.
focusedOptionIndex	number	null	The index of the currently focused option. -1 if no option is focused.
searching	boolean	null	Whether a search is in progress.
anchorEl	HTMLElement	null	The anchor (input) element.
positionerEl	HTMLDivElement	null	The positioner element.

Exposes#

Defines the methods and properties exposed by useAutoComplete.

name	type	default	description
state	useAutoCompleteState	null	The state of the useAutoComplete.
listbox	useListboxInstance	null	The listbox instance used internally for option management.
presence	{ present: boolean; exiting: boolean; mounted: boolean; ref: RefObject<HTMLElement> }	null	The presence state for managing mount/unmount transitions.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input element.
setAnchorRef	(node: HTMLElement) => void	null	Sets the anchor (input) element reference.
setPositionerRef	(node: HTMLDivElement) => void	null	Sets the positioner element reference.
onChange	(event: ChangeEvent<HTMLInputElement>) => void	null	Callback when the input value changes.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Callback when the input receives focus.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Callback when the input loses focus.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Callback when a key is pressed in the input.
onTriggerClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Callback when the dropdown trigger is clicked.
onClearClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Callback when the clear button is clicked.
onOptionSelect	(event: { originalEvent: SyntheticEvent; value: unknown }) => void	null	Callback when an option is selected.
getFocusedOptionId	() => string	null	Gets the ID of the currently focused option for aria-activedescendant.
hasValue	() => boolean	null	Returns whether the autocomplete has a selected value.

Events#

useAutoCompleteValueChangeEvent

Event fired when the autocomplete's value changes.

name	type	description
originalEvent	E	The original event that triggered the change.
value	string	The selected value.
option	unknown	The selected option object.

useAutoCompleteInputValueChangeEvent

Event fired when the autocomplete's input value changes.

name	type	description
originalEvent	E	The original event that triggered the change.
query	string	The current input value.

useAutoCompleteCompleteEvent

Event fired when the autocomplete triggers a search/complete action.

name	type	description
originalEvent	E	The original event that triggered the complete.
query	string	The current query string.

useAutoCompleteOpenChangeEvent

Event object for the onOpenChange callback.

name	type	description
value	boolean	The new value of the autocomplete's open state.

Types#

Instance

Instance of useAutoComplete headless.

values
HeadlessInstance<useAutoCompleteProps, useAutoCompleteState, useAutoCompleteExposes>