Chip Multiselect — Free HTML CSS JS Tag Token Input Field

<div class="cm-field" id="cmField">
  <label class="cm-label">Skills</label>
  <div class="cm-box" id="cmBox">
    <span class="cm-chips" id="cmChips"></span>
    <input type="text" class="cm-input" id="cmInput" placeholder="Add a skill…" autocomplete="off" />
    <ul class="cm-menu" id="cmMenu" role="listbox"></ul>
  </div>
  <p class="cm-hint">Type to filter · Enter to add · Backspace to remove</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0d1018;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:80px 24px}

.cm-field{width:340px}
.cm-label{display:block;color:#aeb6cc;font-size:13px;font-weight:600;margin-bottom:8px}
.cm-box{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:48px;padding:7px 9px;background:#161a26;border:1.5px solid #2a3144;border-radius:12px;cursor:text;transition:border-color .16s,box-shadow .16s}
.cm-box.is-focus{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.16)}
.cm-chips{display:contents}
.cm-chip{display:inline-flex;align-items:center;gap:6px;background:#252b3d;color:#e6eaf5;font-size:13px;font-weight:500;padding:5px 6px 5px 10px;border-radius:8px;animation:cmPop .14s ease}
@keyframes cmPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.cm-chip button{background:#39415a;border:0;color:#c0c7da;width:17px;height:17px;border-radius:5px;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.cm-chip button:hover{background:#ef4444;color:#fff}
.cm-input{flex:1;min-width:90px;background:none;border:0;outline:0;color:#fff;font-family:inherit;font-size:14px;padding:5px 2px}
.cm-input::placeholder{color:#5e6680}
.cm-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;list-style:none;background:#1a1f2e;border:1px solid #2c3346;border-radius:11px;padding:5px;max-height:190px;overflow-y:auto;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:5;display:none}
.cm-menu.is-open{display:block}
.cm-menu li{padding:9px 11px;border-radius:8px;color:#c7cde0;font-size:13px;cursor:pointer}
.cm-menu li.is-active,.cm-menu li:hover{background:#262d40;color:#fff}
.cm-menu li.cm-empty{color:#6b7290;cursor:default}
.cm-hint{font-size:12px;margin-top:8px;color:#6b7290}

var ALL = ['JavaScript','TypeScript','React','Vue','Svelte','Node.js','Python','Go','Rust','CSS','HTML','GraphQL','PostgreSQL','Docker','Figma'];
var selected = [];
var active = -1;

var field = document.getElementById('cmField');
var box = document.getElementById('cmBox');
var chips = document.getElementById('cmChips');
var input = document.getElementById('cmInput');
var menu = document.getElementById('cmMenu');

function available() {
  var q = input.value.trim().toLowerCase();
  return ALL.filter(function (s) {
    return selected.indexOf(s) === -1 && s.toLowerCase().indexOf(q) !== -1;
  });
}

function renderChips() {
  chips.innerHTML = '';
  selected.forEach(function (s) {
    var chip = document.createElement('span');
    chip.className = 'cm-chip';
    chip.textContent = s;
    var x = document.createElement('button');
    x.type = 'button';
    x.innerHTML = '×';
    x.addEventListener('click', function (e) { e.stopPropagation(); remove(s); });
    chip.appendChild(x);
    chips.appendChild(chip);
  });
}

function renderMenu() {
  var list = available();
  active = list.length ? Math.min(active, list.length - 1) : -1;
  menu.innerHTML = '';
  if (!list.length) {
    var empty = document.createElement('li');
    empty.className = 'cm-empty';
    empty.textContent = 'No matches';
    menu.appendChild(empty);
    return;
  }
  list.forEach(function (s, i) {
    var li = document.createElement('li');
    li.textContent = s;
    li.setAttribute('role', 'option');
    if (i === active) li.className = 'is-active';
    li.addEventListener('mousedown', function (e) { e.preventDefault(); add(s); });
    menu.appendChild(li);
  });
}

function add(s) { selected.push(s); input.value = ''; active = -1; renderChips(); renderMenu(); input.focus(); }
function remove(s) { selected = selected.filter(function (x) { return x !== s; }); renderChips(); renderMenu(); input.focus(); }

function open() { menu.classList.add('is-open'); box.classList.add('is-focus'); renderMenu(); }
function close() { menu.classList.remove('is-open'); box.classList.remove('is-focus'); }

box.addEventListener('click', function () { input.focus(); });
input.addEventListener('focus', open);
input.addEventListener('blur', close);
input.addEventListener('input', function () { active = 0; renderMenu(); });

input.addEventListener('keydown', function (e) {
  var list = available();
  if (e.key === 'ArrowDown') { active = (active + 1) % list.length; renderMenu(); e.preventDefault(); }
  else if (e.key === 'ArrowUp') { active = (active - 1 + list.length) % list.length; renderMenu(); e.preventDefault(); }
  else if (e.key === 'Enter' && active > -1 && list[active]) { add(list[active]); e.preventDefault(); }
  else if (e.key === 'Backspace' && !input.value && selected.length) { remove(selected[selected.length - 1]); }
});

renderChips();