Chips is used to enter multiple values on an input field.
import Chips from 'primevue/chips';
Chips is used as a controlled input with v-model property where it should be an array.
<Chips v-model="value" />
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.
<Chips v-model="value" separator="," />
Chip content is customized using item slot that receives a single chip value as a parameter.
<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>
A floating label appears on top of the input field when focused.
<span class="p-float-label">
<Chips id="chips" v-model="value" />
<label for="chips">Chips</label>
</span>
Invalid state style is added using the p-invalid class to indicate a failed validation.
<Chips v-model="value" class="p-invalid" />
When disabled is present, the element cannot be edited and focused.
<Chips v-model="value" disabled />
Compatibility with popular Vue form libraries.
VeeValidate is a popular library for handling forms in Vue.
<template>
<div class="card p-fluid">
<form @submit="onSubmit" class="flex flex-column gap-2">
<Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
<small class="p-error" id="chips-error">{{ errorMessage || ' ' }}</small>
<Button type="submit" label="Submit" class="w-7rem" />
</form>
<Toast />
</div>
</template>
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>
<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. |