TagsInput

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download tags-input -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

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

const Component = UI.TagsInput;

const args = reactive(
  {
    "value": ["react", "vue"],
    "disabled": false,
    "placeholder": "Add a tag...",
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown>,
);
</script>

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

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

• TagsInput
• TagsInputInput
• TagsInputItem
• TagsInputItemDelete
• TagsInputItemText

Examples

Default

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

const Component = UI.TagsInput;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const tags = ref(["react", "vue"]);
</script>

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

Empty

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

const Component = UI.TagsInput;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const tags = ref<string[]>([]);
</script>

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

Disabled

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

const Component = UI.TagsInput;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const tags = ref(["react", "vue"]);
</script>

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

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

TagsInput

TagsInputInput

TagsInputItem

TagsInputItemDelete

TagsInputItemText

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.