Bootstrap Tag Input Field — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="bstag-card">
    <label class="form-label small fw-semibold" for="bstagInput">Tags</label>
    <div class="form-control bstag-container d-flex flex-wrap align-items-center gap-1" id="bstagContainer">
      <input type="text" id="bstagInput" class="bstag-input" placeholder="Add a tag...">
    </div>
    <div class="small text-muted mt-1">Press Enter or comma to add a tag. Backspace removes the last one.</div>
    <div class="small text-danger mt-1 d-none" id="bstagError">That tag has already been added.</div>
  </div>
</div>

.bstag-card { width: 420px; }
.bstag-container { min-height: 46px; height: auto; padding: .35rem .5rem; cursor: text; }
.bstag-input { border: 0; outline: 0; flex: 1 1 80px; min-width: 80px; padding: .15rem 0; background: transparent; }
.bstag-pill { display: inline-flex; align-items: center; gap: .35rem; background: #eef1f4; color: #212529; border-radius: 999px; padding: .2rem .55rem; font-size: .85rem; white-space: nowrap; }
.bstag-pill-remove { cursor: pointer; font-weight: 700; color: #6c757d; }
.bstag-pill-remove:hover { color: #dc3545; }

const container = document.getElementById('bstagContainer');
const input = document.getElementById('bstagInput');
const errorMsg = document.getElementById('bstagError');

let tags = [];

function showDuplicateError() {
  errorMsg.classList.remove('d-none');
  clearTimeout(showDuplicateError._t);
  showDuplicateError._t = setTimeout(() => errorMsg.classList.add('d-none'), 1800);
}

function addTag(rawValue) {
  const value = rawValue.trim();
  if (!value) return;
  const exists = tags.some(t => t.toLowerCase() === value.toLowerCase());
  if (exists) {
    showDuplicateError();
    input.value = '';
    return;
  }
  tags.push(value);
  renderTag(value);
  input.value = '';
}

function renderTag(value) {
  const pill = document.createElement('span');
  pill.className = 'bstag-pill';
  pill.dataset.value = value;
  pill.innerHTML = '<span>' + value + '</span><span class="bstag-pill-remove" role="button" aria-label="Remove tag">&times;</span>';
  container.insertBefore(pill, input);
}

function removeTag(value) {
  tags = tags.filter(t => t !== value);
  const pill = container.querySelector('.bstag-pill[data-value="' + CSS.escape(value) + '"]');
  if (pill) pill.remove();
}

input.addEventListener('keydown', e => {
  if (e.key === 'Enter' || e.key === ',') {
    e.preventDefault();
    addTag(input.value);
  } else if (e.key === 'Backspace' && input.value === '' && tags.length > 0) {
    // Backspace on an already-empty input removes the most recently added
    // tag, mirroring how removable-chip inputs behave in most real apps.
    const last = tags[tags.length - 1];
    removeTag(last);
  }
});

container.addEventListener('click', e => {
  const remove = e.target.closest('.bstag-pill-remove');
  if (remove) {
    const pill = remove.closest('.bstag-pill');
    removeTag(pill.dataset.value);
    return;
  }
  if (e.target === container) input.focus();
});

// Losing focus with unsubmitted text still in the input commits it as a
// tag, rather than discarding a value the user clearly intended to add.
input.addEventListener('blur', () => {
  if (input.value.trim()) addTag(input.value);
});