InputTags groups a collection of contents in items.
import { InputTags } from 'primereact/inputtags';<InputTags>
<InputTags.Item />
<InputTags.Input />
<InputTags.HiddenInput />
</InputTags>'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>
);
}
A new chip is added when enter key is pressed, delimiter property allows definining an additional key. Currently only valid value is , to create a new item when comma key is pressed.
'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>
);
}
The InputTags.Control component accepts a render function that provides access to the component instance, allowing full customization of tags, input field, and additional UI elements. You can add custom icons, implement remove actions with onItemRemoveClick and onRemoveAllItems, or wrap components with additional functionality.
'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>
);
}
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
'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>
);
}
A floating label is displayed when the input is focused or filled.
'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>
);
}
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
'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>
);
}
When disabled is present, the element cannot be edited and focused.
'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>
);
}