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. Visit FloatLabel documentation for more information.
<FloatLabel>
<Chips id="chips" v-model="value" />
<label for="chips">Chips</label>
</FloatLabel>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<Chips v-model="value" variant="filled" />
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
<Chips v-model="value" invalid />
When disabled is present, the element cannot be edited and focused.
<Chips v-model="value" disabled />
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. |