Chips

Chips is used to enter multiple values on an input field.

Basic

Comma Separator

Template

Import via Module


import { Chips } from 'primereact/chips';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/chips/chips.min.js"></script>

Getting Started

Chips requires an array as its value and onChange callback to update the model.


<Chips value={value} onChange={(e) => setValue(e.value)}></Chips>

Custom Content

A chip is customized using itemTemplate function where value is passed to return JSX.


<Chips value={value} onChange={(e) => setValue(e.value)} itemTemplate={customChip}></Chips>


customChip(item) {
    return (
        <div>
            <span>{item} - (active) </span>
            <i className="pi pi-user-plus"></i>
        </div>
    );
}

KeyFilter

Chips has built-in key filtering support to block certain keys, refer to keyfilter page for more information.

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the component.
inputId	string	null	Identifier of the focus input to match a label defined for the chips.
name	string	null	Name of the input field.
placeholder	string	null	Advisory information to display on input.
value	array	null	Value of the component.
max	number	null	Maximum number of entries allowed.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readOnly	boolean	false	When present, it specifies that the element should be read-only.
removable	boolean	true	Whether an item is removable.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
allowDuplicate	boolean	true	Whether to allow duplicate values or not.
separator	string	null	Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","
itemTemplate	function	null	Template function to return the content of a chip.
keyfilter	string/regex	null	Format definition of the keys to block.
addOnBlur	boolean	null	Whether to add an item when the input loses focus.

Events

Name	Parameters	Description
onChange	originalEvent: Browser event value: New value of the component	Callback to invoke when a chip is added or removed.
onAdd	originalEvent: Browser event value: Added item value	Callback to invoke when a chip is added. Return 'false' to prevent the item from being added.
onRemove	originalEvent: Browser event value: Removed item value	Callback to invoke when a chip is removed.
onFocus	event: Browser event	Callback to invoke when the component gets focus.
onBlur	event: Browser event	Callback to invoke when the component loses focus.
onKeyDown	event: Browser event.	Callback to invoke when the key pressed.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-chips	Container element
p-chips-token	Chip element container.
p-chips-token-icon	Icon of a chip.
p-chips-token-label	label of a chip.
p-chips-input-token	Container of input element.