Components/Tags Input

Tags Input

Tier 2: Light-DOM

Multi-token chip input with keyboard badge removal and duplicate prevention

Installation

$npx nnui add tags-input

copy

Interactive Preview & Code

Project Technologies

Press Backspace when empty to delete the previous tag.

Current Array: ["React", "TypeScript", "Tailwind"]

<div style="width: 100%; max-width: 440px;">
              <label data-ui="label" for="demo-tags-input" style="margin-bottom: 0.5rem; display: block; font-weight: 600;">Project Technologies</label>
              <ui-tags-input id="demo-tags-input" tags="React, TypeScript, Tailwind" max-tags="8" placeholder="Type and press Enter..."></ui-tags-input>
              <span data-ui="field-hint" style="margin-top: 0.35rem; display: block;">Press Backspace when empty to delete the previous tag.</span>
            </div>

            <div data-ui="card" style="padding: 1rem 1.5rem; width: 100%; max-width: 440px; text-align: center; font-size: 0.85rem; color: var(--ui-text-secondary);">
              Current Array: <code id="tags-array-display" style="color: var(--ui-color-brand-600); font-weight: 600;">["React", "TypeScript", "Tailwind"]</code>
            </div>

import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements

export default function TagsinputDemo() {
  const [tab, setTab] = useState('all');
  const [val, setVal] = useState(50);
  const [selected, setSelected] = useState('');
  const [query, setQuery] = useState('');

  return (
    <div style="width: 100%; max-width: 440px;">
                  <label data-ui="label" htmlFor="demo-tags-input" style="margin-bottom: 0.5rem; display: block; font-weight: 600;">Project Technologies</label>
                  <ui-tags-input id="demo-tags-input" tags="React, TypeScript, Tailwind" max-tags="8" placeholder="Type and press Enter..."></ui-tags-input>
                  <span data-ui="field-hint" style="margin-top: 0.35rem; display: block;">Press Backspace when empty to delete the previous tag.</span>
                </div>

                <div data-ui="card" style="padding: 1rem 1.5rem; width: 100%; max-width: 440px; text-align: center; font-size: 0.85rem; color: var(--ui-text-secondary);">
                  Current Array: <code id="tags-array-display" style="color: var(--ui-color-brand-600); font-weight: 600;">["React", "TypeScript", "Tailwind"]</code>
                </div>
  );
}

<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements

const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');

const handleSelect = (val) => {
  console.log('Selected:', val);
};
</script>

<template>
  <div style="width: 100%; max-width: 440px;">
                <label data-ui="label" for="demo-tags-input" style="margin-bottom: 0.5rem; display: block; font-weight: 600;">Project Technologies</label>
                <ui-tags-input id="demo-tags-input" tags="React, TypeScript, Tailwind" max-tags="8" placeholder="Type and press Enter..."></ui-tags-input>
                <span data-ui="field-hint" style="margin-top: 0.35rem; display: block;">Press Backspace when empty to delete the previous tag.</span>
              </div>

              <div data-ui="card" style="padding: 1rem 1.5rem; width: 100%; max-width: 440px; text-align: center; font-size: 0.85rem; color: var(--ui-text-secondary);">
                Current Array: <code id="tags-array-display" style="color: var(--ui-color-brand-600); font-weight: 600;">["React", "TypeScript", "Tailwind"]</code>
              </div>
</template>

<script>
  import 'nnui-kit';

  let activeTab = $state('all');
  let sliderValue = $state(50);
  let selected = $state('');
</script>

<div style="width: 100%; max-width: 440px;">
              <label data-ui="label" for="demo-tags-input" style="margin-bottom: 0.5rem; display: block; font-weight: 600;">Project Technologies</label>
              <ui-tags-input id="demo-tags-input" tags="React, TypeScript, Tailwind" max-tags="8" placeholder="Type and press Enter..."></ui-tags-input>
              <span data-ui="field-hint" style="margin-top: 0.35rem; display: block;">Press Backspace when empty to delete the previous tag.</span>
            </div>

            <div data-ui="card" style="padding: 1rem 1.5rem; width: 100%; max-width: 440px; text-align: center; font-size: 0.85rem; color: var(--ui-text-secondary);">
              Current Array: <code id="tags-array-display" style="color: var(--ui-color-brand-600); font-weight: 600;">["React", "TypeScript", "Tailwind"]</code>
            </div>

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnui-kit/css';
import 'nnui-kit/client';
import { TagsInput } from 'nnui-kit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-tags-input> and <nnui-tags-input> -->
import 'nnui-kit/css';
import 'nnui-kit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.