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"></p-chips>
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"></p-chips>
</form>
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="," placeholder="Hint: a, b, c"></p-chips>
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]="separatorExp" placeholder="Hint: a, b c"></p-chips>
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>
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. |
Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label 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"></p-chips>
<span id="chips2">Tags</span>
<p-chips aria-labelledby="chips2"></p-chips>
<p-chips aria-label="Tags"></p-chips>
| Key | Function |
|---|---|
| tab | Moves focus to the input element |
| enter | Adds a new chips using the input field value. |
| backspace | Deletes the previous chip if the input field is empty. |
| left arrow | Moves focus to the previous chip if available and input field is empty. |
| Key | Function |
|---|---|
| left arrow | Moves focus to the previous chip if available. |
| right arrow | Moves focus to the next chip, if there is none then input field receives the focus. |
| backspace | Deletes the chips and adds focus to the input field. |
API defines helper props, events and others for the PrimeNG Chips module.
Chips groups a collection of contents in tabs.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| onAdd | event : ChipsAddEvent | Callback to invoke on chip add. | |
| onRemove | event : ChipsRemoveEvent | Callback to invoke on chip remove. | |
| onFocus | event : Event | Callback to invoke on focus of input field. | |
| onBlur | event : Event | Callback to invoke on blur of input field. | |
| onChipClick | event : ChipsClickEvent | Callback to invoke on chip clicked. | |
| onClear | value : any | Callback to invoke on clear token clicked. |
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Custom add event.
Custom remove event.
Custom click event.