InputTags API

API documentation for InputTags component

InputTagsRoot#

Props#

Defines valid properties in InputTags 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?: InputTagsRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsRootInstance) => 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<InputTagsRootPassThrough>	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: InputTagsRootInstance) => ReactNode)	null	The children to render.
disabled	boolean	null	When present, it specifies that the component should be disabled.
name	string	null	Name of the input element.
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	When enabled, the component spans the full width of its parent.
onValueChange	(event: InputTagsRootValueChangeEvent) => void	null	Callback fired when the inputtags's value changes.
value	string[]	null	Value of the items.
defaultValue	string[]	null	Default value of the items.
inputValue	string	null	Value of the input field (controlled).
defaultInputValue	string	null	Default value of the input field.
open	boolean	null	Controlled open state of the input tags overlay.
defaultOpen	boolean	null	Default open state for uncontrolled mode.
max	number	null	Maximum number of items allowed.
delimiter	string \| RegExp	null	Delimiter character or regex to split input into items.
allowDuplicate	boolean	null	Whether to allow duplicate items.
addOnBlur	boolean	null	Whether to add item on blur event.
addOnPaste	boolean	null	Whether to add item on paste event.
addOnTab	boolean	null	Whether to add item on tab key press.
options	unknown[]	null	An array of options to display in dropdown.
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.
delay	number	null	Delay between keystrokes to wait before sending a query.
minLength	number	null	Minimum number of characters to initiate a search.
appendTo	HTMLElement \| "body" \| "self"	null	A valid query selector or an HTMLElement to specify where the overlay gets attached.
onAdd	(event: useInputTagsAddEvent) => void	null	Callback to invoke when a item is added.
onRemove	(event: useInputTagsRemoveEvent) => void	null	Callback to invoke when a item is removed.
onInputValueChange	(event: useInputTagsInputValueChangeEvent) => void	null	Callback when the input value changes.
onComplete	(event: useInputTagsCompleteEvent) => void	null	Callback to invoke to search for suggestions.
onOpenChange	(event: useInputTagsOpenChangeEvent) => 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 InputTags component.

name	type	default	description
value	string[]	null	Current items value.
inputValue	string	null	Current input field value.
focusedItemIndex	number	null	Index of the currently focused item item (-1 if none).
opened	boolean	null	Whether the overlay is open.
searching	boolean	null	Whether a search is in progress.
focused	boolean	null	Whether the input is focused.
focusedOptionIndex	number	null	The index of the currently focused option. -1 if no option is focused.

Exposes#

Defines the methods and properties exposed by InputTags component.

name	type	default	description
state	useInputTagsState	null	Current state of the component.
listbox	useListboxInstance	null	The listbox instance used internally for option management.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input element.
portalRef	RefObject<{ containerRef: { current: { elementRef: RefObject<HTMLDivElement> } } }>	null	Reference to the portal element.
itemRefs	RefObject<Map<number, HTMLElement>>	null	Map of item refs by index.
onClick	() => void	null	Click handler for the container.
onChange	(event: ChangeEvent<HTMLInputElement>) => void	null	Input change handler.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Keyboard event handler for navigation.
onPaste	(event: ClipboardEvent<HTMLInputElement>) => void	null	Paste event handler.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Blur event handler.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Focus event handler.
onItemRemoveClick	(index: number) => void	null	Remove icon click handler.
onRemoveAllItems	() => void	null	Removes all items.
changeVisibleState	(isVisible: boolean) => void	null	Changes the visibility state of the overlay.
onOverlayEnter	() => void	null	Callback when the overlay enters.
onOverlayAfterEnter	() => void	null	Callback after the overlay has entered.
getFocusedOptionId	() => string	null	Returns the ID of the currently focused option.

Events#

InputTagsRootValueChangeEvent

Event fired when the inputtags's value changes.

name	type	description
value	string[]	Value of the inputtags.

InputTagsOpenChangeEvent

Event object for the onOpenChange callback.

name	type	description
value	boolean	The new value of the input tags overlay's open state.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTags component.

name	type	default	description
root	InputTagsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
item	InputTagsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the item's DOM element.
pcInputText	InputTagsRootPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.
hiddenInput	InputTagsRootPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the hidden input's DOM element.
list	InputTagsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the list's DOM element.
pcListbox	InputTagsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the pcListbox's DOM element.
panel	InputTagsRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.
options	InputTagsRootPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the options' DOM element.
option	InputTagsRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the option's DOM element.

Types#

Instance

Instance of InputTags component.

values
ComponentInstance<InputTagsRootProps, InputTagsRootState, InputTagsRootExposes>

InputTagsInput#

Props#

Defines valid properties in InputTagsInput 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?: InputTagsInputInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsInputInstance) => 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<InputTagsInputPassThrough>	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: InputTagsInputInstance) => 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 InputTagsInput component.

name	type	default	description
inputtags	InputTagsRootInstance	null	Instance of the InputTags component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTagsInput component.

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

Types#

Instance

Instance of InputTagsInput component.

values
ComponentInstance<InputTagsInputProps, InputTagsInputState, InputTagsInputExposes>

InputTagsItem#

Props#

Defines valid properties in InputTagsItem 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?: InputTagsItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsItemInstance) => 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<InputTagsItemPassThrough>	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: InputTagsItemInstance) => 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 InputTagsItem component.

name	type	default	description
inputtags	InputTagsRootInstance	null	Instance of the InputTags component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTagsItem component.

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

Types#

Instance

Instance of InputTagsItem component.

values
ComponentInstance<InputTagsItemProps, InputTagsItemState, InputTagsItemExposes>

InputTagsPortal#

Props#

Defines valid properties in InputTagsPortal 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?: InputTagsPortalInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsPortalInstance) => 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<InputTagsPortalPassThrough>	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: InputTagsPortalInstance) => 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 InputTagsPortal component.

name	type	default	description
inputtags	InputTagsRootInstance	null	The InputTags component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTagsPortal component.

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

Types#

Instance

Instance of InputTagsPortal component.

values
ComponentInstance<InputTagsPortalProps, InputTagsPortalState, InputTagsPortalExposes>

InputTagsList#

Props#

Defines valid properties in InputTagsList 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?: InputTagsListInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsListInstance) => 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<InputTagsListPassThrough>	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: InputTagsListInstance) => 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 InputTagsList component.

name	type	default	description
inputtags	InputTagsRootInstance	null	The InputTags component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTagsList component.

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

Types#

Instance

Instance of InputTagsList component.

values
ComponentInstance<InputTagsListProps, InputTagsListState, InputTagsListExposes>

InputTagsOptions#

Props#

Defines valid properties in InputTagsOptions 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?: InputTagsOptionsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsOptionsInstance) => 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<InputTagsOptionsPassThrough>	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: InputTagsOptionsInstance) => 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 InputTagsOptions component.

name	type	default	description
inputtags	InputTagsRootInstance	null	The InputTags component instance.
listbox	ListboxRootInstance	null	The Listbox component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTagsOptions component.

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

Types#

Instance

Instance of InputTagsOptions component.

values
ComponentInstance<InputTagsOptionsProps, InputTagsOptionsState, InputTagsOptionsExposes>

InputTagsOption#

Props#

Defines valid properties in InputTagsOption 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?: InputTagsOptionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsOptionInstance) => 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<InputTagsOptionPassThrough>	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: InputTagsOptionInstance) => 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 InputTagsOption component.

name	type	default	description
inputtags	InputTagsRootInstance	null	The InputTags 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 InputTagsOption component.

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

Types#

Instance

Instance of InputTagsOption component.

values
ComponentInstance<InputTagsOptionProps, InputTagsOptionState, InputTagsOptionExposes>

useInputTags#

Props#

Defines valid properties in useInputTags.

name	type	default	description
value	string[]	null	Value of the items.
defaultValue	string[]	null	Default value of the items.
inputValue	string	null	Value of the input field (controlled).
defaultInputValue	string	null	Default value of the input field.
open	boolean	null	Controlled open state of the input tags overlay.
defaultOpen	boolean	null	Default open state for uncontrolled mode.
max	number	null	Maximum number of items allowed.
delimiter	string \| RegExp	null	Delimiter character or regex to split input into items.
allowDuplicate	boolean	null	Whether to allow duplicate items.
addOnBlur	boolean	null	Whether to add item on blur event.
addOnPaste	boolean	null	Whether to add item on paste event.
addOnTab	boolean	null	Whether to add item on tab key press.
options	unknown[]	null	An array of options to display in dropdown.
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.
delay	number	null	Delay between keystrokes to wait before sending a query.
minLength	number	null	Minimum number of characters to initiate a search.
appendTo	HTMLElement \| "body" \| "self"	null	A valid query selector or an HTMLElement to specify where the overlay gets attached.
onValueChange	(event: useInputTagsValueChangeEvent) => void	null	Callback to invoke when value changes.
onAdd	(event: useInputTagsAddEvent) => void	null	Callback to invoke when a item is added.
onRemove	(event: useInputTagsRemoveEvent) => void	null	Callback to invoke when a item is removed.
onInputValueChange	(event: useInputTagsInputValueChangeEvent) => void	null	Callback when the input value changes.
onComplete	(event: useInputTagsCompleteEvent) => void	null	Callback to invoke to search for suggestions.
onOpenChange	(event: useInputTagsOpenChangeEvent) => void	null	Callback to invoke when the open state changes.

State#

Defines valid state in useInputTags.

name	type	default	description
value	string[]	null	Current items value.
inputValue	string	null	Current input field value.
focusedItemIndex	number	null	Index of the currently focused item item (-1 if none).
opened	boolean	null	Whether the overlay is open.
searching	boolean	null	Whether a search is in progress.
focused	boolean	null	Whether the input is focused.
focusedOptionIndex	number	null	The index of the currently focused option. -1 if no option is focused.

Exposes#

Defines the methods and properties exposed by useInputTags.

name	type	default	description
state	useInputTagsState	null	Current state of the component.
listbox	useListboxInstance	null	The listbox instance used internally for option management.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input element.
portalRef	RefObject<{ containerRef: { current: { elementRef: RefObject<HTMLDivElement> } } }>	null	Reference to the portal element.
itemRefs	RefObject<Map<number, HTMLElement>>	null	Map of item refs by index.
onClick	() => void	null	Click handler for the container.
onChange	(event: ChangeEvent<HTMLInputElement>) => void	null	Input change handler.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Keyboard event handler for navigation.
onPaste	(event: ClipboardEvent<HTMLInputElement>) => void	null	Paste event handler.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Blur event handler.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Focus event handler.
onItemRemoveClick	(index: number) => void	null	Remove icon click handler.
onRemoveAllItems	() => void	null	Removes all items.
changeVisibleState	(isVisible: boolean) => void	null	Changes the visibility state of the overlay.
onOverlayEnter	() => void	null	Callback when the overlay enters.
onOverlayAfterEnter	() => void	null	Callback after the overlay has entered.
getFocusedOptionId	() => string	null	Returns the ID of the currently focused option.

Events#

useInputTagsValueChangeEvent

Custom change event for InputTags component.

name	type	description
value	string[]	The new value of the items.

useInputTagsAddEvent

Event fired when an item is added.

name	type	description
value	string	The added item value.

useInputTagsRemoveEvent

Event fired when an item is removed.

name	type	description
value	string	The removed item value.
index	number	The index of the removed item.

useInputTagsInputValueChangeEvent

Event fired when the input value changes.

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

useInputTagsCompleteEvent

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.

useInputTagsOpenChangeEvent

Event object for the onOpenChange callback.

name	type	description
value	boolean	The new value of the input tags overlay's open state.

Types#

Instance

Instance of useInputTags headless.

values
HeadlessInstance<useInputTagsProps, useInputTagsState, useInputTagsExposes>