New InputTags Component

apps/showcase/__store__/index.tsx

@@ -781,6 +781,40 @@ export const Store: Record<string, Record<string, { component: React.LazyExoticC
             'filePath': 'demo/inputotp/sizes-demo.tsx',
         },
     },
+    'inputtags': {
+        'basic-demo': {
+            'component': React.lazy(() => import('demo/inputtags/basic-demo')),
+            'filePath': 'demo/inputtags/basic-demo.tsx',
+        },
+        'delimiter-demo': {
+            'component': React.lazy(() => import('demo/inputtags/delimiter-demo')),
+            'filePath': 'demo/inputtags/delimiter-demo.tsx',
+        },
+        'disabled-demo': {
+            'component': React.lazy(() => import('demo/inputtags/disabled-demo')),
+            'filePath': 'demo/inputtags/disabled-demo.tsx',
+        },
+        'filled-demo': {
+            'component': React.lazy(() => import('demo/inputtags/filled-demo')),
+            'filePath': 'demo/inputtags/filled-demo.tsx',
+        },
+        'float-label-demo': {
+            'component': React.lazy(() => import('demo/inputtags/float-label-demo')),
+            'filePath': 'demo/inputtags/float-label-demo.tsx',
+        },
+        'inputtags-pt': {
+            'component': React.lazy(() => import('demo/inputtags/inputtags-pt')),
+            'filePath': 'demo/inputtags/inputtags-pt.tsx',
+        },
+        'invalid-demo': {
+            'component': React.lazy(() => import('demo/inputtags/invalid-demo')),
+            'filePath': 'demo/inputtags/invalid-demo.tsx',
+        },
+        'item-demo': {
+            'component': React.lazy(() => import('demo/inputtags/item-demo')),
+            'filePath': 'demo/inputtags/item-demo.tsx',
+        },
+    },
     'inputtext': {
         'basic-demo': {
             'component': React.lazy(() => import('demo/inputtext/basic-demo')),

apps/showcase/demo/inputtags/basic-demo.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { InputTagsInstance } from '@primereact/types/shared/inputtags';
+import { InputTags } from 'primereact/inputtags';
+
+export default function BasicDemo() {
+    return (
+        <InputTags>
+            {(instance: InputTagsInstance) => {
+                return (
+                    <>
+                        {instance?.state.value.map((value, index) => (
+                            <InputTags.Item key={`${value}_${index}`} index={index} />
+                        ))}
+                        <InputTags.Input />
+                        <InputTags.HiddenInput />
+                    </>
+                );
+            }}
+        </InputTags>
+    );
+}

apps/showcase/demo/inputtags/delimiter-demo.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { InputTagsInstance } from '@primereact/types/shared/inputtags';
+import { InputTags } from 'primereact/inputtags';
+
+export default function BasicDemo() {
+    return (
+        <InputTags delimiter=",">
+            {(instance: InputTagsInstance) => {
+                return (
+                    <>
+                        {instance?.state.value.map((value, index) => (
+                            <InputTags.Item key={`${value}_${index}`} index={index} />
+                        ))}
+                        <InputTags.Input />
+                    </>
+                );
+            }}
+        </InputTags>
+    );
+}

apps/showcase/demo/inputtags/disabled-demo.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { InputTagsInstance } from '@primereact/types/shared/inputtags';
+import { InputTags } from 'primereact/inputtags';
+
+export default function DisabledDemo() {
+    return (
+        <InputTags disabled>
+            {(instance: InputTagsInstance) => {
+                return (
+                    <>
+                        {instance?.state.value.map((value, index) => (
+                            <InputTags.Item key={`${value}_${index}`} index={index} />
+                        ))}
+                        <InputTags.Input />
+                    </>
+                );
+            }}
+        </InputTags>
+    );
+}

apps/showcase/demo/inputtags/filled-demo.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { InputTagsInstance } from '@primereact/types/shared/inputtags';
+import { InputTags } from 'primereact/inputtags';
+
+export default function FilledDemo() {
+    return (
+        <InputTags variant="filled">
+            {(instance: InputTagsInstance) => {
+                return (
+                    <>
+                        {instance?.state.value.map((value, index) => (
+                            <InputTags.Item key={`${value}_${index}`} index={index} />
+                        ))}
+                        <InputTags.Input />
+                        <InputTags.HiddenInput />
+                    </>
+                );
+            }}
+        </InputTags>
+    );
+}

apps/showcase/demo/inputtags/float-label-demo.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { InputTagsInstance, InputTagsValueChangeEvent } from '@primereact/types/shared/inputtags';
+import { InputTags } from 'primereact/inputtags';
+import { Label } from 'primereact/label';
+import * as React from 'react';
+
+export default function FloatLabelDemo() {
+    const [tags, setTags] = React.useState<string[]>([]);
+
+    return (
+        <Label.Float>
+            <InputTags value={tags} onValueChange={(e: InputTagsValueChangeEvent) => setTags(e.value as string[])}>
+                {(instance: InputTagsInstance) => {
+                    return (
+                        <>
+                            {instance?.state.value.map((value, index) => (
+                                <InputTags.Item key={`${value}_${index}`} index={index} />
+                            ))}
+                            <InputTags.Input />
+                        </>
+                    );
+                }}
+            </InputTags>
+            <Label htmlFor="over_label">Over Label</Label>
+        </Label.Float>
+    );
+}

apps/showcase/demo/inputtags/inputtags-pt.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { InputTagsInstance } from '@primereact/types/shared/inputtags';
+import { InputTags } from 'primereact/inputtags';
+
+export default function InputTagsPTDemo() {
+    return (
+        <InputTags>
+            {(instance: InputTagsInstance) => {
+                return (
+                    <>
+                        {instance?.state.value.map((value, index) => (
+                            <InputTags.Item key={`${value}_${index}`} index={index} />
+                        ))}
+                        <InputTags.Input />
+                    </>
+                );
+            }}
+        </InputTags>
+    );
+}

apps/showcase/demo/inputtags/invalid-demo.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { InputTagsInstance, useInputTagsValueChangeEvent } from '@primereact/types/shared/inputtags';
+import { InputTags } from 'primereact/inputtags';
+import * as React from 'react';
+
+export default function InvalidDemo() {
+    const [tags, setTags] = React.useState<string[]>([]);
+
+    return (
+        <InputTags value={tags} invalid={tags.length === 0} onValueChange={(e: useInputTagsValueChangeEvent) => setTags(e.value as string[])}>
+            {(instance: InputTagsInstance) => {
+                return (
+                    <>
+                        {instance?.state.value.map((value, index) => (
+                            <InputTags.Item key={`${value}_${index}`} index={index} />
+                        ))}
+                        <InputTags.Input />
+                    </>
+                );
+            }}
+        </InputTags>
+    );
+}

apps/showcase/demo/inputtags/item-demo.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { SpinnerIcon } from '@primereact/icons';
+import { InputTagsInstance } from '@primereact/types/shared/inputtags';
+import { IconField } from 'primereact/iconfield';
+import { InputTags } from 'primereact/inputtags';
+import { Tag } from 'primereact/tag';
+
+export default function ItemDemo() {
+    return (
+        <InputTags>
+            {(instance: InputTagsInstance) => {
+                return (
+                    <>
+                        <SpinnerIcon spin className="mx-1" />
+                        {instance?.state.value.map((value, index) => (
+                            <Tag key={`${value}_${index}`}>
+                                <Tag.Label>{value}</Tag.Label>
+                                <Tag.Icon>
+                                    <i className="pi pi-trash" onClick={() => instance?.onItemRemoveClick(index)} />
+                                </Tag.Icon>
+                            </Tag>
+                        ))}
+                        <IconField className="static">
+                            <InputTags.Input />
+                            <IconField.Icon>
+                                <i className="pi pi-times" onClick={() => instance?.onRemoveAllItems()} />
+                            </IconField.Icon>
+                        </IconField>
+                    </>
+                );
+            }}
+        </InputTags>
+    );
+}

apps/showcase/docs/components/inputotp/pt.mdx

@@ -10,6 +10,10 @@ Some sections may not be visible due to the availability of the particular featu
 
 <DocPTViewer name="inputotp-pt" components={['InputOtp']} />
 
-## PT Options
+## InputOtp PT Options
 
 <DocTable name="InputOtp" category="pt" />
+
+## InputOtpText PT Options
+
+<DocTable name="InputOtpText" category="pt" />

apps/showcase/docs/components/inputtags/api.mdx

@@ -0,0 +1,103 @@
+---
+title: InputTags API
+description: API documentation for InputTags component
+component: inputtags
+---
+
+## InputTags
+
+### Props
+
+<DocTable name="InputTags" category="api" type="props" />
+
+### State
+
+<DocTable name="InputTags" category="api" type="state" />
+
+### Exposes
+
+<DocTable name="InputTags" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="InputTags" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="InputTags" category="api" type="types" />
+
+## InputTagsInput
+
+### Props
+
+<DocTable name="InputTagsInput" category="api" type="props" />
+
+### Exposes
+
+<DocTable name="InputTagsInput" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="InputTagsInput" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="InputTagsInput" category="api" type="types" />
+
+## InputTagsItem
+
+### Props
+
+<DocTable name="InputTagsItem" category="api" type="props" />
+
+### Exposes
+
+<DocTable name="InputTagsItem" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="InputTagsItem" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="InputTagsItem" category="api" type="types" />
+
+## InputTagsHiddenInput
+
+### Props
+
+<DocTable name="InputTagsHiddenInput" category="api" type="props" />
+
+### Exposes
+
+<DocTable name="InputTagsHiddenInput" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="InputTagsHiddenInput" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="InputTagsHiddenInput" category="api" type="types" />
+
+## useInputTags
+
+### Props
+
+<DocTable name="useInputTags" category="api" type="props" />
+
+### State
+
+<DocTable name="useInputTags" category="api" type="state" />
+
+### Exposes
+
+<DocTable name="useInputTags" category="api" type="exposes" />
+
+### Events
+
+<DocTable name="useInputTags" category="api" type="events" />
+
+### Types
+
+<DocTable name="useInputTags" category="api" type="types" />