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

Import the parts you need from the component's folder.

import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText,
} from "@/components/ui/tags-input";

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

one

Pass disabled to block adding or removing tags.

vue

nuxt

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.

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.

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

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

Keyboard shortcuts and ARIA behavior.

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.