Skip to content
Relements Relements

<re-tags-input>

A self-managing wrapper around the tags input (enhanceTagsInput) in container mode — the element is the .re-tags-input group, so the chips are injected as siblings of the authored <input> without ever moving it. That makes it the framework-safe form of the token editor: the host framework treats the element’s light DOM as opaque (see the framework guide). See the custom elements overview for how the <re-*> tags work.

Import once to register the tag, then use it declaratively:

import "@relements/core/elements/re-tags-input";

The inner <input> is the no-JS fallback (a plain comma-separated field) and the form control the behavior adopts. Host attributes — name, value, placeholder, disabled, max, allow-duplicates, tone, tags-name — are reflected onto it on connect.

Basic

Section titled “Basic”
Project tags
Live example
<div class="re-field">
  <span class="re-field__label" id="ti-label">Project tags</span>
  <re-tags-input name="tags" value="design, eng" aria-labelledby="ti-label">
    <input class="re-input" type="text" placeholder="Add tags" />
  </re-tags-input>
</div>

Max tags

Section titled “Max tags”

max caps the number of committed tags (here 3):

Skills
Live example
<div class="re-field">
  <span class="re-field__label" id="ti-max-label">Skills</span>
  <re-tags-input name="skills" value="html, css" max="3" aria-labelledby="ti-max-label">
    <input class="re-input" type="text" placeholder="Up to 3" />
  </re-tags-input>
</div>

API

Section titled “API”
  • element.values — the committed tag values as a read-only string[].
  • element.clear() — removes all tags and dispatches re-tags-change + change.
  • Emits a bubbling re-tags-change ({ values }) on every add/remove; a native bubbling change fires alongside it.

Accessibility

Section titled “Accessibility”

Give the element an accessible name with aria-label or aria-labelledby — it has no <label>, and that name becomes the group’s. Everything else is the behavior’s contract: the editor stays a native text field, each chip’s remove button is a real <button>, and adds/removes are announced through a polite live region. See the tags input accessibility notes and the accessibility guide.