Tags Input

Free-form tag entry. Type, press Enter or comma, get a chip. Backspace removes the last chip.

Default

Pre-seeded list of tags.

vue

nuxt

tailwind

Set delimiter to commit a tag on a different key (here, space).

one

Pass disabled to block adding or removing tags.

vue

nuxt

Props, events, and slots for each sub-component.

Props

Prop	Type	Default	Description
modelValue	string[]	[]	Current tags. Supports v-model.
addOnPaste	boolean	false	Auto-split pasted content on commas/newlines into tags.
duplicate	boolean	false	Allow duplicate tags.
delimiter	string \| RegExp	","	Separator that splits typed input into tags.

Events

Event	Description
update:modelValue	Fires when tags are added or removed. Enables v-model.
add-tag	Fires with the value of a newly added tag.
remove-tag	Fires with the value of a removed tag.

Props

Prop	Type	Default	Description
value	string	—	(TagsInputItem) The tag this chip represents. ItemText renders the label; ItemDelete is the remove button.

Props

Prop	Type	Default	Description
placeholder	string	—	Placeholder for the free-text entry field.

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`Enter`	Adds the typed text as a new tag.
`Backspace`	Removes the last tag when the input is empty.
`←`	Moves focus to the previous tag.
`→`	Moves focus to the next tag.
`Delete`	Removes the focused tag.

A comma also commits the typed text as a new tag.
Each tag is focusable and can be removed individually.
The field is labelled with role-appropriate ARIA so additions and removals are announced.