@rozie-ui/tags-vue

@rozie-ui/tags-vue

Idiomatic vue Tags — a headless, fully-accessible (WAI-ARIA) tags / token input (removable chips, type-to-add with configurable delimiters, paste-to-bulk-add, dedup, per-token validation, a max cap, and a scoped #tag slot for custom chip rendering) compiled from one Rozie source. The interaction engine IS the browser's native <input> plus the platform clipboard/keyboard; every visual value is a CSS custom property, so it re-skins to any design system. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/tags-vue

Peer dependencies: vue. Install them alongside this package.

Also installed: @rozie/runtime-vue — Rozie's small, tree-shaken runtime helper package (controllable state, keyboard navigation, event modifiers, and safe interpolation). It arrives as a regular dependency, so npm pulls it for you. This build imports nothing from it today, so it shakes out of your bundle entirely. What's in it and what it costs.

Usage

<script setup lang="ts">
import { ref } from 'vue';
import Tags from '@rozie-ui/tags-vue';

const skills = ref<string[]>(['rozie', 'vue']);
function onAdd(e: { value: string; tokens: string[] }) {
  console.log('added', e.value);
}
</script>

<template>
  <Tags v-model:modelValue="skills" placeholder="Add a skill…" aria-label="Skills" :max="8" @add="onAdd" />

  <!-- Custom chip via the scoped #tag slot -->
  <Tags v-model:modelValue="skills" aria-label="Skills">
    <template #tag="{ tag, remove }">
      <span class="pill">{{ tag }} <button type="button" @click="remove">×</button></span>
    </template>
  </Tags>
</template>

Theming

Every visual value is a --rozie-tags-* CSS custom property — override any of them at any ancestor scope. Ready-made design-system bridges ship in the package:

import '@rozie-ui/tags-vue/themes/shadcn.css';    // or material.css, bootstrap.css, base.css

Props

Events

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const tags = ref();          // template ref
</script>

<template>
  <Tags ref="tags" v-model:modelValue="skills" />
  <button @click="tags.clear()">Clear</button>
</template>

Slots

The scoped tag slot lets you fully replace each chip; its params are { tag, index, remove } (the token string, its index, and a zero-arg remove() for that token). On React the slot is a render-prop children callback (the documented cross-framework slot divergence).