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.
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
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. |
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. |
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. |
separator | string | null | Separator char to add an item when pressed in addition to the enter key. |
showClear | boolean | false | When enabled, a clear icon is displayed to clear the value. |
Name | Parameters |
---|---|
item | $implicit: item |
removetokenicon | - |
clearicon | - |