InputTags API

API documentation for InputTags component

InputTags#

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?: InputTagsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsInstance) => 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<InputTagsPassThrough>	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: InputTagsInstance) => 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: InputTagsValueChangeEvent) => void	null	Callback fired when the inputtags's value changes.
defaultValue	string[]	null	Default value of the items.
value	string[]	null	Value of the items.
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.
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.
[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).

Exposes#

Defines the methods and properties exposed by InputTags component.

name	type	default	description
state	useInputTagsState	null	Current state of the component.
controlRef	RefObject<HTMLDivElement>	null	Reference to the control element.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input 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.
onItemRemoveClick	(index: number) => void	null	Remove icon click handler.
onRemoveAllItems	() => void	null	Removes all items.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTags component.

name	type	default	description
root	InputTagsPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
item	InputTagsPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the item's DOM element.
pcInputText	InputTagsPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.
hiddenInput	InputTagsPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the hidden input's DOM element.

Types#

Instance

Instance of InputTags component.

values
ComponentInstance<InputTagsProps, InputTagsState, InputTagsExposes>

InputTagsInput#

Props#

Defines valid properties in InputTagsInputcomponent.

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 InputTagsInputcomponent.

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

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTagsInputcomponent.

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

Types#

Instance

Instance of InputTagsInputcomponent.

values
ComponentInstance<InputTagsInputProps, InputTagsInputState, InputTagsInputExposes>

InputTagsItem#

Props#

Defines valid properties in InputTagsItemcomponent.

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 InputTagsItemcomponent.

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

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTagsItemcomponent.

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

Types#

Instance

Instance of InputTagsItemcomponent.

values
ComponentInstance<InputTagsItemProps, InputTagsItemState, InputTagsItemExposes>

InputTagsHiddenInput#

Props#

Defines valid properties in InputTagsHiddenInputcomponent.

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?: InputTagsHiddenInputInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputTagsHiddenInputInstance) => 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<InputTagsHiddenInputPassThrough>	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: InputTagsHiddenInputInstance) => ReactNode)	null	The children to render.
name	string	null	Name of the hidden input field.
[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 InputTagsHiddenInputcomponent.

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

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputTagsHiddenInputcomponent.

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

Types#

Instance

Instance of InputTagsHiddenInputcomponent.

values
ComponentInstance<InputTagsHiddenInputProps, InputTagsHiddenInputState, InputTagsHiddenInputExposes>

useInputTags#

Props#

Defines valid properties in useInputTags.

name	type	default	description
defaultValue	string[]	null	Default value of the items.
value	string[]	null	Value of the items.
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.
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.

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).

Exposes#

Defines the methods and properties exposed by useInputTags.

name	type	default	description
state	useInputTagsState	null	Current state of the component.
controlRef	RefObject<HTMLDivElement>	null	Reference to the control element.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input 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.
onItemRemoveClick	(index: number) => void	null	Remove icon click handler.
onRemoveAllItems	() => void	null	Removes all items.

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.

Types#

Instance

Instance of useInputTags headless.

values
HeadlessInstance<useInputTagsProps, useInputTagsState, useInputTagsExposes>