Tag Input

The .pl-c-tag-input wraps chips and an inline text input. JS handles tokenization (Enter/comma to add, backspace to remove); CSS handles the layout. Auto-grows via field-sizing: content where supported.

Semantic HTML

<div class="pl-c-field">
  <label class="pl-c-field__label" for="tags">Tags</label>
  <div class="pl-c-tag-input">
    <span class="pl-c-chip">
      React
      <button class="pl-c-chip__remove" type="button" aria-label="Remove React">
        x
      </button>
    </span>
    <input id="tags" class="pl-c-tag-input__field" placeholder="Add tag..." />
  </div>
</div>

Use explicit for/id labels for tag inputs that include removable chips. Do not wrap chip remove buttons inside a <label>.

Class contract