Chips

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


import { ChipsModule } from 'primeng/chips';

Chips is used as a controlled input with ngModel property where it should be an array.


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

Chips can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.


<form [formGroup]="formGroup">
    <p-chips formControlName="values" />
</form>

Chips can have a maximum number of entered items. To set this limit, the max property is used, which accepts a numeric value that represents the maximum number of items in the chip list


<p-chips 
    [formControl]="values" 
    [max]="max" 
    placeholder="Maximum 2 items" />

A new chip is added when enter key is pressed, separator property allows definining an additional key. Currently only valid value is , to create a new item when comma key is pressed.


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

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="pi pi-user ml-2"></i> 
     </ng-template>
</p-chips>

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.


<p-floatLabel>
    <p-chips id="chips" [(ngModel)]="values" />
    <label for="chips">Chips</label>
</p-floatLabel>

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<p-chips [(ngModel)]="value" variant="filled" />

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.


<p-chips [(ngModel)]="values" class="ng-invalid ng-dirty" />

When disabled is present, the element cannot be edited and focused.


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

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

NameElement
p-chipsContainer element.
p-chips-tokenChip element container.
p-chips-token-iconIcon of a chip.
p-chips-token-labelLabel of a chip.
p-chips-input-tokenContainer of input element.

Screen Reader

Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. Chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip.


<label for="chips1">Tags</label>
<p-chips inputId="chips1"/>

<span id="chips2">Tags</span>
<p-chips ariaLabelledBy="chips2"/>

<p-chips ariaLabel="Tags"/>

Input Field Keyboard Support

KeyFunction
tabMoves focus to the input element
enterAdds a new chips using the input field value.
backspaceDeletes the previous chip if the input field is empty.
left arrowMoves focus to the previous chip if available and input field is empty.

Chip Keyboard Support

KeyFunction
left arrowMoves focus to the previous chip if available.
right arrowMoves focus to the next chip, if there is none then input field receives the focus.
backspaceDeletes the chips and adds focus to the input field.