Tags Input

Accessible, unstyled TagsInput with typed tags, delimiters, paste splitting, and form association.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

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

Or copy the source into your project with vize lib pull tags-input (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Controlled tags input bound with v-model, labelled by visible text, with removable tags. -->
<script setup lang="ts">
import { ref, useId } from "vue";

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

const topics = ref<readonly string[]>(["vue", "vite"]);
const labelId = useId();
</script>

<template>
  <div>
    <span :id="labelId">Topics</span>
    <TagsInputRoot v-model="topics" name="topics" :max="5" :aria-labelledby="labelId">
      <template #default="{ tags }">
        <TagsInputItem v-for="(tag, index) in tags" :key="tag" :value="tag" :index>
          <TagsInputItemText />
          <TagsInputItemDelete>&times;</TagsInputItemDelete>
        </TagsInputItem>
        <TagsInputInput placeholder="Add a topic" />
      </template>
    </TagsInputRoot>
    <output>{{ topics.join(", ") }}</output>
  </div>
</template>

API

TagsInput<T>

Source: src/families/form/tags-input/tags-input-root.vue

Props

Events

Slots

Exposed

TagsInputRoot<T>

Source: src/families/form/tags-input/tags-input-root.vue

Props

Events

Slots

Exposed

TagsInputInput

Source: src/families/form/tags-input/tags-input-input.vue

Props

Exposed

TagsInputItem<T>

Source: src/families/form/tags-input/tags-input-item.vue

Props

Slots

Exposed

TagsInputItemDelete

Source: src/families/form/tags-input/tags-input-item-delete.vue

Props

Slots

TagsInputItemText

Source: src/families/form/tags-input/tags-input-item-text.vue

Slots

Behavior

Contract

TagsInput is a headless compound field that turns typed or pasted text into a typed tag list. tags-input-root.vue (generic="T") owns the value, parsing, validation, duplicate detection, the max limit, native form association, and form reset. tags-input-item.vue renders one focusable tag, handles roving arrow-key focus, deletion, and inline editing. tags-input-item-text.vue renders the resolved tag text, tags-input-item-delete.vue renders a non-tabbable remove button, and tags-input-input.vue renders the native text input that commits candidates.

The text input is the single Tab stop. Tags are tabindex="-1" elements with role="group", aria-roledescription="tag", and an accessible name equal to the tag text; group is used because each tag contains its own remove button, which a button or option role would not permit. Styling is consumer-owned through parts, slots, CSS, and data attributes.

Without parseTag, tags are the trimmed typed strings; non-string tag types must provide parseTag (and usually tagText, which also produces each submitted form value).

Public Surface

Normative Behavior