Chips Chips is used to enter multiple values on an inputfield.

Basic

Template

{{item}} - (active)

Import


import {ChipsModule} from 'primeng/chips';

Getting Started

Chips requires an array as its model.


<p-chips [(ngModel)]="values"></p-chips>


export class MyModel {

    values: string[];

}

Model Driven Forms

Chips can be used in a model driven form as well.


<p-chips formControlName="cities"></p-chips>

Custom Content

A chip is customized using a ng-template element where the value is passed as the implicit variable.


<p-chips [(ngModel)]="values">
    <ng-template let-item pTemplate="item">
        {{item}} - (active) <i class="fa fa-user"></i>
    </ng-template>
</p-chips>

Properties

Name	Type	Default	Description
field	string	null	Name of the property to display on a chip.
max	number	null	Maximum number of entries allowed.
disabled	boolean	false	When present, it specifies that the element should be disabled.
style	string	null	Inline style of the element.
styleClass	string	null	Style class of the element.
placeholder	string	null	Advisory information to display on input.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
allowDuplicate	boolean	true	Whether to allow duplicate values or not.
inputStyle	string	null	Inline style of the input field.
inputStyleClass	string	null	Style class of the input field.
addOnTab	boolean	false	Whether to add an item on tab key press.
addOnBlur	boolean	false	Whether to add an item when the input loses focus.

Events

Name	Parameters	Description
onAdd	originalEvent: Browser event value: Added item value	Callback to invoke when a value is added.
onRemove	originalEvent: Browser event value: Added item value	Callback to invoke when a value is removed.
onFocus	originalEvent: Browser event	Callback to invoke when a input is focused.
onBlur	originalEvent: Browser event	Callback to invoke when a input loses focus.

Styling

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

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

Dependencies

None.

View on GitHub


<h3 class="first">Basic</h3>
<p-chips [(ngModel)]="values1" ></p-chips>

<h3>ng-template</h3>
<p-chips [(ngModel)]="values2">
    <ng-template let-item pTemplate="item">
        {{item}} - (active) <i class="fa fa-user" style="margin-right:2em"></i>
    </ng-template>
</p-chips>


export class ChipsDemo {

    values1: string[];
    
    values2: string[];
}