V3 has reached EOL, Upgrade to PrimeVue 4

Chips

Chips is used to enter multiple values on an input field.

Import #


import Chips from 'primevue/chips';

Basic #

Chips is used as a controlled input with v-model property where it should be an array.


<Chips v-model="value" />

Separator #

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

Template #

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>

Float Label #

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

Chips


<FloatLabel>
    <Chips id="chips" v-model="value" />
    <label for="chips">Chips</label>
</FloatLabel>

Filled #

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 #

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

Disabled #

When disabled is present, the element cannot be edited and focused.


<Chips v-model="value" disabled />

Accessibility #

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

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.

Chip Keyboard Support

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.

name	type	default	description
modelValue	any[]	null	Value of the component.
max	number	null	Maximum number of entries allowed.
addOnBlur	boolean	false	Whether to add an item when the input loses focus.
allowDuplicate	boolean	true	Whether to allow duplicate values or not.
separator	any	null	Separator char to add an item when pressed in addition to the enter key.
inputId	string	null	Identifier of the focus input to match a label defined for the chips.
inputClass	string \| object	null	Style class of the input field.
inputStyle	object	null	Inline style of the input field.
inputProps	InputHTMLAttributes	null	Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
removeTokenIcon	string	null	Icon to display in chip remove action.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
disabled	boolean	false	When present, it specifies that the element should be disabled.
variant	"filled" \| "outlined"	outlined	Specifies the input variant of the component.
placeholder	string	null	Placeholder text for the input.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string	null	Establishes a string value that labels the component.
pt	PassThrough<ChipsPassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
update:modelValue	value: any[]	void	Emitted when the value changes.
add	event: ChipsAddEvent	void	Callback to invoke when a chip is added.
remove	event: ChipsRemoveEvent	void	Callback to invoke when a chip is removed.

name	parameters	returnType	description
chip	scope: { value: any, // Value of the component }	VNode<RendererNode, RendererElement, Object>[]	Custom chip template.
removetokenicon	scope: { class: string, // Style class of the icon. index: number, // Index of the token. onClick: (event: Event, index: number) ⇒ void, // Remove token icon function. removeCallback: (event: Event, index: number) ⇒ void, // Remove token icon function. }	VNode<RendererNode, RendererElement, Object>[]	Custom remove token icon template.

name	type	description
originalEvent	Event	Browser event.
value	any	Added/Removed item value.

name	type	description
originalEvent	Event	Browser event.
value	any	Added/Removed item value.

Chips

Import #

Basic #

Separator #

Template #

Float Label #

Filled #

Invalid #

Disabled #

Accessibility #

Screen Reader

Input Field Keyboard Support

Chip Keyboard Support

Chips API

Chips #

Props #

Emits #

Slots #

Events #

ChipsAddEvent #

ChipsRemoveEvent #

Interfaces #

ChipsPassThroughMethodOptions #

ChipsPassThroughOptions #

ChipsPassThroughAttributes #

ChipsState #

Types #

ChipsPassThroughOptionType #

name	type	default	description
instance	any	null	Defines instance.
props	ChipsProps	null	Defines valid properties.
state	ChipsState	null	Defines current inline state.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	ChipsPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
container	ChipsPassThroughOptionType	null	Used to pass attributes to the container's DOM element.
token	ChipsPassThroughOptionType	null	Used to pass attributes to the token's DOM element.
label	ChipsPassThroughOptionType	null	Used to pass attributes to the label's DOM element.
removeTokenIcon	ChipsPassThroughOptionType	null	Used to pass attributes to the remove token icon's DOM element.
inputToken	ChipsPassThroughOptionType	null	Used to pass attributes to the input token's DOM element.
input	ChipsPassThroughOptionType	null	Used to pass attributes to the input's DOM element.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.

name	type	default	description
id	string	null	Current id state as a string.
inputValue	string	null	Current input value as a string.
focused	boolean	false	Current focused state as a boolean.
focusedIndex	number	null	Current focused item index state as a number.