TagInput

Form

Input that creates tags/labels as you type.

Props

Prop	Type	Default	Description
`modelValue`	`string[]`	`[]`	Current tags (v-model).
`placeholder`	`string`	`"Add tag…"`	Input placeholder.
`disabled`	`boolean`	`false`	Disable the component.
`max`	`number`	`undefined`	Maximum number of tags.
`allowDuplicates`	`boolean`	`false`	Allow duplicate tags.

Examples

Type and press Enter to add tags

Nuxt Vue 3

vue

<script setup>
const tags = ref(['Nuxt', 'Vue 3'])
</script>
<template>
  <DsTagInput v-model="tags" placeholder="Add a tag and press Enter…" :max="5" />
</template>

Skeleton

Use DsTagInputSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsTagInputSkeleton />

Accessibility

Press Enter to add a tag.
Backspace on empty input removes the last tag.
Each tag has a remove button with aria-label.

Switch

Textarea