Vue Chips is used to enter multiple values on an input field. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import Chips from 'primevue/chips';
Getting Started
An array as the value can be bound using the standard v-model directive.
<Chips v-model="value" />
Custom Content
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>
Theming
Chips supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Chips showcase for demos and documentation.