142Tag input

Chips inside an input-shaped box; the entry is a bare input at the end. Enter or comma commits, Backspace on empty removes the last tag, and every chip's remove is a real labelled button.

Use it for

Course tags, lesson topics — small free-vocabulary sets

Not for

Choosing from a fixed list — Select or checkboxes
Dozens of tags — curate the vocabulary instead

With tags

admin beginner lightning

markup

<div class="ns-taginput" style="max-inline-size:26rem">
  <span class="ns-taginput__tag">admin<button type="button" class="ns-taginput__x" aria-label="Remove admin"><i class="ph ph-x" aria-hidden="true"></i></button></span>
  <span class="ns-taginput__tag">beginner<button type="button" class="ns-taginput__x" aria-label="Remove beginner"><i class="ph ph-x" aria-hidden="true"></i></button></span>
  <span class="ns-taginput__tag">lightning<button type="button" class="ns-taginput__x" aria-label="Remove lightning"><i class="ph ph-x" aria-hidden="true"></i></button></span>
  <input aria-label="Tags" placeholder="">
</div>