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.
| 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 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"/>
| 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 methods that can be accessed by the component's reference.
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.