Ready for Dev, so its markup, attributes, events and styles can all still change without notice,
it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work
can be seen and reviewed - nothing more.
TagInput
Token entry that turns text into removable chips, rendered as
<input is="root-tag-input">.
Usage
<label>Skills <input is="root-tag-input" name="skills" value="css,html" aria-label="Skills" /></label>
Type and press Enter to add a chip; Backspace on an empty field removes
the last; each chip has a remove button. The chips are the source of truth: when a name is
set, a hidden input mirrors the comma-joined value for form submission (the typed buffer never submits),
and a seed value populates the initial chips. A root-tag-input.change event
carries the current tag list.
Methods
| Method | Description |
|---|---|
addTag(text) / removeTag(text) |
Add (trimmed, de-duplicated) or remove a tag |
tags |
The current tag list (getter) |
Events
| Event | Detail | Description |
|---|---|---|
root-tag-input.change |
{ tags: string[] } |
Fired when the tag list changes |
Extends
HTMLInputElement - use with <input is="root-tag-input">.