Tag Input

`pura-tag-input` is a form field that turns text into chips: typing and pressing Enter (or comma) adds a tag, Backspace in an empty field removes the last one, and the × on each chip removes it individually. Use it when you need to collect a list of short values (keywords, recipients, categories), with an optional limit via `max` and no duplicates. It is agent-native: each instance registers in `window.__puraTagInputs` and mirrors its state on the host via the `data-tags` (JSON), `data-count`, and `data-max` attributes, allowing an agent to read and control the tags without touching the shadow DOM.

Preview

<pura-tag-input
  id="tags-demo"
  value="javascript,css,web components"
  placeholder="Add a technology"
  max="6"></pura-tag-input>
<p id="tags-saida">3 tag(s): javascript, css, web components</p>
<script type="module">
  const input = document.getElementById("tags-demo");
  const saida = document.getElementById("tags-saida");
  input.addEventListener("change", (e) => {
    const tags = e.detail.tags;
    saida.textContent = `${tags.length} tag(s): ${tags.join(", ") || "none"}`;
  });
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/tag-input.js"></script>

import "./pura/lib/tag-input.js";