import Chips from 'primevue/chips';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/chips/chips.min.js"></script>
An array as the value can be bound using the standard v-model directive.
<Chips v-model="value" />
A chip is customized using the chip template where the chip value is passed to the slotProps with the value property.
<Chips v-model="value">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>
</Chips>
Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | array | null | Value of the component. |
| max | number | null | Maximum number of entries allowed. |
| separator | string | null | Separator char to add an item when pressed in addition to the enter key. Currently only possible value is "," |
| addOnBlur | boolean | false | Whether to add an item when the input loses focus. |
| allowDuplicate | boolean | true | Whether to allow duplicate values or not. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| placeholder | string | null | Placeholder text for the input. |
| inputId | string | null | Style class of the component input field. |
| inputClass | string | null | Style class of the input field. |
| inputStyle | any | null | Inline style of the input field. |
| inputProps | object | null | Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component. |
| removeTokenIcon | string | pi pi-times-circle | Icon to display in chip remove action. |
Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.
| Name | Parameters | Description |
|---|---|---|
| add |
originalEvent: Browser event value: Added item value |
Callback to invoke when a chip is added. |
| remove |
originalEvent: Browser event value: Removed item value |
Callback to invoke when a chip is removed. |
| Name | Parameters |
|---|---|
| chip | value: Value of the component |
Following is the list of structural style classes, for theming classes visit
| 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>
<Chips inputId="chips1" />
<span id="chips2">Tags</span>
<Chips aria-labelledby="chips2" />
<Chips aria-label="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. |
None.