StorybookGitHub

Tags Input

An input field for creating and managing a list of tags.

Design
Vue
Accessibility

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/tags-input.json

Usage

Use tags input when users need to enter multiple free-form values, such as keywords or emails, as individually removable chips instead of a single delimited string.

<script setup lang="ts">
import { ref } from "vue";
import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText,
} from "@/components/ui/tags-input";

const tags = ref(["Vue", "Nuxt"]);
</script>

<template>
  <TagsInput v-model="tags">
    <TagsInputItem v-for="tag in tags" :key="tag" :value="tag">
      <TagsInputItemText />
      <TagsInputItemDelete />
    </TagsInputItem>
    <TagsInputInput placeholder="Add tag..." />
  </TagsInput>
</template>

TagsInputItemDelete renders a lucide X icon by default; pass a slot to override it. Built on reka-ui's TagsInput primitive.