Chips

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 || '&nbsp;' }}</small>
            <Button type="submit" label="Submit" class="w-7rem" />
        </form>
        <Toast />
    </div>
</template>

Screen Reader

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" />

Input Field Keyboard Support

KeyFunction
tabMoves focus to the input element
enterAdds a new chips using the input field value.
backspaceDeletes the previous chip if the input field is empty.
left arrowMoves focus to the previous chip if available and input field is empty.

Chip Keyboard Support

KeyFunction
left arrowMoves focus to the previous chip if available.
right arrowMoves focus to the next chip, if there is none then input field receives the focus.
backspaceDeletes the chips and adds focus to the input field.