Tags — usage examples

Tags ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

React

import { useState } from 'react';
import { Tags } from '@rozie-ui/tags-react';

export function Demo() {
  const [skills, setSkills] = useState<string[]>(['rozie', 'react']);
  return (
    <Tags
      modelValue={skills}
      onValueChange={setSkills}
      placeholder="Add a skill…"
      ariaLabel="Skills"
      max={8}
      onAdd={(e) => console.log('added', e.value)}
    />
  );
}

// Custom chip rendering via the scoped #tag slot (React render-prop API).
export function PillsDemo() {
  const [tags, setTags] = useState<string[]>([]);
  return (
    <Tags value={tags} onValueChange={setTags} ariaLabel="Tags">
      {({ tag, remove }) => (
        <span className="pill">
          {tag}
          <button type="button" onClick={remove} aria-label={`Remove ${tag}`}>×</button>
        </span>
      )}
    </Tags>
  );
}

Vue

<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>

Svelte

<script lang="ts">
  import Tags from '@rozie-ui/tags-svelte';

  let skills = $state<string[]>(['rozie', 'svelte']);
</script>

<Tags
  bind:modelValue={skills}
  placeholder="Add a skill…"
  ariaLabel="Skills"
  max={8}
  onadd={(e) => console.log('added', e.value)}
/>

<!-- Custom chip via the scoped #tag snippet -->
<Tags bind:modelValue={skills} ariaLabel="Skills">
  {#snippet tag({ tag, remove })}
    <span class="pill">{tag} <button type="button" onclick={remove}>×</button></span>
  {/snippet}
</Tags>

Angular

import { Component } from '@angular/core';
import { Tags } from '@rozie-ui/tags-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Tags],
  template: `
    <Tags
      [(modelValue)]="skills"
      placeholder="Add a skill…"
      ariaLabel="Skills"
      [max]="8"
      (add)="onAdd($event)"
    />
  `,
})
export class DemoComponent {
  skills = ['rozie', 'angular'];
  onAdd(e: { value: string; tokens: string[] }) {
    console.log('added', e.value);
  }
}

Solid

import { createSignal } from 'solid-js';
import { Tags } from '@rozie-ui/tags-solid';

export function Demo() {
  const [skills, setSkills] = createSignal<string[]>(['rozie', 'solid']);
  return (
    <Tags
      modelValue={skills()}
      onValueChange={setSkills}
      placeholder="Add a skill…"
      ariaLabel="Skills"
      max={8}
      onAdd={(e) => console.log('added', e.value)}
    />
  );
}

Lit

import '@rozie-ui/tags-lit';

// <rozie-tags> is a custom element. Bind `modelValue` (the tokens array) and the
// config props as properties; listen for `value-change` to receive the new
// tokens array, and `add` / `remove` for individual mutations.
const el = document.querySelector('rozie-tags');
el.modelValue = ['rozie', 'lit'];
el.placeholder = 'Add a skill…';
el.max = 8;
el.addEventListener('value-change', (e) => {
  el.modelValue = e.detail;
});
el.addEventListener('add', (e) => {
  console.log('added', e.detail.value);
});

Imperative handle

Beyond props and events, Tags exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

React

import { useRef } from 'react';
import { Tags, type TagsHandle } from '@rozie-ui/tags-react';

const tags = useRef<TagsHandle>(null);
// <Tags ref={tags} ... />
tags.current?.focus();
tags.current?.clear();

Vue

<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>

Svelte

<script>
  let tags;                  // component instance via bind:this
</script>

<Tags bind:this={tags} bind:modelValue={skills} />
<button onclick={() => tags.clear()}>Clear</button>

Angular

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Tags) tags!: Tags;   // or the viewChild() signal
  focusIt() { this.tags.focus(); }
  clearIt() { this.tags.clear(); }
}

Solid

import { Tags, type TagsHandle } from '@rozie-ui/tags-solid';

let handle: TagsHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Tags ref={(h) => (handle = h)} modelValue={skills()} />;
handle?.clear();

Lit

// The custom element IS the handle — exposed methods are public element
// methods. `focus()` here DELIBERATELY overrides the inherited HTMLElement.focus
// (it focuses the inline text input).
const el = document.querySelector('rozie-tags');
el.focus();
el.clear();

See also

• Tags — showcase & API — the full prop / event / slot / handle reference, theming, and accessibility.
• Tags comparison — how it stacks up against the per-framework libraries.
• Tags — live demo — the real package running in the page, plus the one .rozie source and all six generated outputs.