Tag Input

The .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="c-field">
  <label class="c-field__label" for="tags">Tags</label>
  <div class="c-tag-input">
    <span class="c-chip">
      React
      <button class="c-chip__remove" type="button" aria-label="Remove React">
        x
      </button>
    </span>
    <input id="tags" class="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