InputTags

An unstyled tag input component with keyboard navigation, delimiter support, and optional typeahead suggestions.

Build fully custom tag input fields with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use InputTags with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Tag creation on Enter key press with optional delimiter character
Maximum tag limit with max prop
Duplicate prevention with allowDuplicate
Optional typeahead suggestion dropdown via options and onComplete
Add and remove event callbacks for fine-grained control
Paste support with addOnPaste and automatic delimiter splitting

Usage#

import { InputTags } from 'primereact/inputtags';

<InputTags.Root>
    <InputTags.Items>
        <InputTags.Item>
            <InputTags.Label />
            <InputTags.Remove />
        </InputTags.Item>
    </InputTags.Items>
    <InputTags.Input />
</InputTags.Root>

With Positioner#

When options are provided for typeahead support, use Portal, Positioner, Popup, and List sub-components to render the suggestion dropdown.

import { InputTags } from 'primereact/inputtags';
 
<InputTags.Root options={filteredItems} optionLabel="label" onComplete={search}>
    <InputTags.Items>
        <InputTags.Item>
            <InputTags.Label />
            <InputTags.Remove />
        </InputTags.Item>
    </InputTags.Items>
    <InputTags.Input />
    <InputTags.Portal>
        <InputTags.Positioner sideOffset={4}>
            <InputTags.Popup>
                <InputTags.List />
            </InputTags.Popup>
        </InputTags.Positioner>
    </InputTags.Portal>
</InputTags.Root>;

Behavior#

Motion Animation#

<InputTags.Popup motionProps={{ name: 'p-inputtags' }}>...</InputTags.Popup>

See Motion for animation phases, CSS variables, and hide strategies.

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<InputTags.Root as="section">
    <InputTags.Input as={CustomInput} />
</InputTags.Root>

Render Function Children#

InputTags.Root accepts a render function as children, providing access to the component instance for custom tag rendering and imperative actions like onItemRemoveClick and onRemoveAllItems.

<InputTags.Root>
    {(instance) => (
        <>
            {instance?.state.value.map((value, index) => (
                <span key={index}>
                    {value}
                    <button onClick={() => instance?.onItemRemoveClick(index)}>×</button>
                </span>
            ))}
            <InputTags.Input />
        </>
    )}
</InputTags.Root>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

InputTagsRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsRootInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string[]`	—
Value of the items.
`defaultValue`	`string[]`	—
Default value of the items.
`inputValue`	`string`	—
Value of the input field (controlled).
`defaultInputValue`	`string`	—
Default value of the input field.
`open`	`boolean`	—
Controlled open state of the input tags overlay.
`defaultOpen`	`boolean`	—
Default open state for uncontrolled mode.
`max`	`number`	—
Maximum number of items allowed.
`delimiter`	`string` \| `RegExp`	—
Delimiter character or regex to split input into items.
`allowDuplicate`	`boolean`	—
Whether to allow duplicate items.
`addOnBlur`	`boolean`	—
Whether to add item on blur event.
`addOnPaste`	`boolean`	—
Whether to add item on paste event.
`addOnTab`	`boolean`	—
Whether to add item on tab key press.
`options`	`unknown[]`	—
An array of options to display in dropdown.
`optionKey`	`string`	—
Unique key for each option.
`optionLabel`	`string`	—
Label field for each option.
`optionValue`	`string`	—
Value field for each option.
`optionDisabled`	`string`	—
Field to check if an option is disabled.
`optionGroupLabel`	`string`	—
Label field for option groups.
`optionGroupChildren`	`string`	—
Field that contains the children options in a group.
`delay`	`number`	—
Delay between keystrokes to wait before sending a query.
`minLength`	`number`	—
Minimum number of characters to initiate a search.
`appendTo`	`"body"` \| `HTMLElement` \| `"self"`	—
A valid query selector or an HTMLElement to specify where the overlay gets attached.
`closeOnEscape`	`boolean`	—
When enabled, the overlay closes when Escape key is pressed.
`autoFocus`	`boolean`	—
When enabled, the overlay receives focus automatically when opened.
`trapped`	`boolean`	—
When enabled, focus is trapped within the overlay.
`onAdd`	`(event: useInputTagsAddEvent) => void`	—
Callback to invoke when a item is added.
`onRemove`	`(event: useInputTagsRemoveEvent) => void`	—
Callback to invoke when a item is removed.
`onInputValueChange`	`(event: useInputTagsInputValueChangeEvent) => void`	—
Callback when the input value changes.
`onComplete`	`(event: useInputTagsCompleteEvent) => void`	—
Callback to invoke to search for suggestions.
`onOpenChange`	`(event: useInputTagsOpenChangeEvent) => void`	—
Callback to invoke when the open state changes.
`disabled`	`boolean`	—
When present, it specifies that the component should be disabled.
`name`	`string`	—
Name of the input element.
`invalid`	`boolean`	—
When present, it specifies that the component should have invalid state style.
`variant`	`"outlined"` \| `"filled"`	—
Specifies the input variant of the component.
`fluid`	`boolean`	—
When enabled, the component spans the full width of its parent.
`onValueChange`	`(event: InputTagsRootValueChangeEvent) => void`	—
Callback fired when the inputtags's value changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputtags"`
`data-part`	`"root"`

Defines passthrough(pt) options of InputTags component.

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

InputTagsItems#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsItemsInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsItemsInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsItemsInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsItemsPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsItemsInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputTagsItems component.

label	type	description
root	InputTagsItemsPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputTagsItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsItemInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsItemInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsItemPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsItemInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputtags"`
`data-part`	`"item"`

Defines passthrough(pt) options of InputTagsItem component.

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

InputTagsLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsLabelInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputTagsLabel component.

label	type	description
root	InputTagsLabelPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the root's DOM element.

InputTagsRemove#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsRemoveInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsRemoveInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsRemoveInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsRemovePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsRemoveInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputtags"`
`data-part`	`"remove"`

Defines passthrough(pt) options of InputTagsRemove component.

label	type	description
root	InputTagsRemovePassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the root's DOM element.

InputTagsInput#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsInputInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsInputInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsInputInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsInputPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsInputInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputTagsInput component.

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

InputTagsStart#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsStartInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsStartInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsStartInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsStartPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsStartInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputTagsStart component.

label	type	description
root	InputTagsStartPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the root's DOM element.

InputTagsEnd#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsEndInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsEndInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsEndInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsEndPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsEndInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputTagsEnd component.

label	type	description
root	InputTagsEndPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the root's DOM element.

InputTagsPortal#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`(CSSProperties` \| `((instance?: PortalInstance) => CSSProperties)) & (CSSProperties` \| `((instance?: InputTagsPortalInstance) => CSSProperties))`	—
The style to apply to the component.
`className`	`(string` \| `((instance?: PortalInstance) => string)) & (string` \| `((instance?: InputTagsPortalInstance) => string))`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BaseInstance<SafeRecord<PortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<PortalProps>>; attrs: Omit<SafeRecord<SafeRecord<PortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & PortalExposes & Record<PropertyKey, unknown> & useComponentPTReturnType & useComponentStyleReturnType & BaseInstance<SafeRecord<InputTagsPortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<InputTagsPortalProps>>; attrs: Omit<SafeRecord<SafeRecord<InputTagsPortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & InputTagsPortalExposes`	—
The instance to pass to the component.
`pt`	`PortalPassThrough & Record<PropertyKey, unknown> & InputTagsPortalPassThrough`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: PortalInstance) => ReactNode & (instance: InputTagsPortalInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`onMounted`	`() => void`	—
Callback function to invoke when the portal is mounted.
`onUnmounted`	`() => void`	—
Callback function to invoke when the portal is unmounted.
`element`	`HTMLElement` \| `ReactNode`	—
The element to be rendered as the portal.
`elementRef`	`RefObject<HTMLElement>`	—
The element reference to be rendered as the portal.
`appendTo`	`string` \| `HTMLElement` \| `((instance: PortalInstance) => HTMLElement)`	`'body'`
The DOM element where the portal should be appended to.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputTagsPortal component.

label	type	description
root	InputTagsPortalPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputTagsPositioner#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsPositionerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsPositionerInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsPositionerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsPositionerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsPositionerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`side`	`SideType`	—
The side of the positioner.
`align`	`AlignType`	—
The align of the positioner.
`sideOffset`	`number`	—
The side offset of the positioner.
`alignOffset`	`number`	—
The align offset of the positioner.
`flip`	`boolean`	—
Whether to flip the positioner.
`shift`	`boolean`	—
Whether to shift the positioner.
`hideWhenDetached`	`boolean`	—
Whether to hide the positioner when detached.
`strategy`	`"fixed"` \| `"absolute"`	`'fixed'`
The positioning strategy.
`boundary`	`HTMLElement`	—
The boundary element that constrains the positioner placement. Used in JS fallback mode only; CSS Anchor mode uses the containing block.
`anchor`	`HTMLElement`	—
The anchor element.
`content`	`HTMLDivElement`	—
The content element.
`arrow`	`HTMLDivElement`	—
The arrow element.
`autoZIndex`	`boolean`	`true`
Whether to automatically manage layering.
`baseZIndex`	`number`	`0`
Base zIndex value to use in layering.
`onPlacementChange`	`(placement: { side: SideType; align: AlignType }) => void`	—
Callback invoked when the actual placement changes due to flip or shift.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputtags"`
`data-part`	`"positioner"`
`data-side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` — placement
`data-align`	`"start"` \| `"center"` \| `"end"` — alignment

CSS Custom Properties

The positioner element exposes CSS custom properties for layout and transform control.

CSS Variable	Description
`--available-height`	Available vertical space in pixels
`--available-width`	Available horizontal space in pixels
`--transform-origin`	Computed transform origin for animations
`--positioner-anchor-width`	Width of the anchor/trigger element

Defines passthrough(pt) options of InputTagsPositioner component.

label	type	description
root	InputTagsPositionerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputTagsPopup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsPopupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsPopupInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsPopupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsPopupPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsPopupInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`motionProps`	`useMotionProps`	—
Used to apply motion to the popup element. It accepts the same properties as useMotion hook.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputtags"`
`data-part`	`"popup"`
`data-open`	Present when popup is open

Defines passthrough(pt) options of InputTagsPopup component.

label	type	description
root	InputTagsPopupPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputTagsPanel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsPanelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsPanelInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsPanelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsPanelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsPanelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputTagsPanel component.

label	type	description
root	InputTagsPanelPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputTagsList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsListInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsListPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsListInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputtags"`
`data-part`	`"list"`

Defines passthrough(pt) options of InputTagsList component.

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

InputTagsOption#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsOptionInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsOptionInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsOptionInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsOptionPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsOptionInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`option`	`unknown`	—
The option data object.
`index`	`number`	—
The index of the option in the list.
`selected`	`boolean`	—
Whether the option is selected.
`focused`	`boolean`	—
Whether the option is focused.
`disabled`	`boolean`	—
Whether the option is disabled.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-selected`	Present when selected
`data-unselected`	Present when unselected
`data-focused`	Present when focused
`data-disabled`	Present when disabled

Defines passthrough(pt) options of InputTagsOption component.

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

InputTagsArrow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputTagsArrowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputTagsArrowInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputTagsArrowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputTagsArrowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputTagsArrowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` — placement
`data-align`	`"start"` \| `"center"` \| `"end"` — alignment

CSS Custom Properties

The arrow element exposes CSS custom properties for dynamic positioning:

CSS Variable	Description
`--placer-arrow-x`	Horizontal offset of arrow
`--placer-arrow-y`	Vertical offset of arrow
`--placer-arrow-left`	Left position of arrow element
`--placer-arrow-top`	Top position of arrow element

Defines passthrough(pt) options of InputTagsArrow component.

label	type	description
root	InputTagsArrowPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

The input element has textbox role in addition to aria-describedby attribute. The tag list uses listbox role with aria-orientation set to horizontal.

When typeahead is enabled, the input element has combobox role in addition to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list.

Keyboard Support#

Key	Function
`tab`	Moves focus to the input element.
`enter`	Adds a new tag with the current input value.
`backspace`	Removes the last tag when input is empty.
`left arrow`	Moves focus to the previous tag when input is empty.
`right arrow`	Moves focus to the next tag when focused on a tag.

Tag Keyboard Support#

Key	Function
`backspace`	Removes the focused tag.
`delete`	Removes the focused tag.

Key	Function
`tab`	Selects the focused option and closes the popup, then moves focus to next element in page.
`enter`	Selects the focused option and closes the popup.
`escape`	Closes the popup.
`down arrow`	Moves focus to the next option.
`up arrow`	Moves focus to the previous option.
`home`	Moves focus to the first option.
`end`	Moves focus to the last option.

InputTags

Pre-styled Versions

Features#

Usage#

With Positioner#

Behavior#

Motion Animation#

Polymorphic Rendering#

Render Function Children#

Pass Through#

API#

InputTagsRoot#

InputTagsItems#

InputTagsItem#

InputTagsLabel#

InputTagsRemove#

InputTagsInput#

InputTagsStart#

InputTagsEnd#

InputTagsPortal#

InputTagsPositioner#

InputTagsPopup#

InputTagsPanel#

InputTagsList#

InputTagsOption#

InputTagsArrow#

Accessibility#

Screen Reader#

Keyboard Support#

Tag Keyboard Support#

Popup Keyboard Support (Typeahead)#