Tag Input

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 520px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.section {
  margin-bottom: 1.75rem;
}
.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  margin-bottom: 0.5rem;
}

/* ── Tag Input container ── */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.875rem;
  padding: 0.375rem 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tag-input:focus-within {
  border-color: rgba(99, 179, 237, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.12);
}

/* ── Tag chip ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
  background: rgba(99, 179, 237, 0.15);
  border: 1px solid rgba(99, 179, 237, 0.3);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #7dd3fc;
  white-space: nowrap;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
  cursor: default;
}
.tag:focus {
  background: rgba(99, 179, 237, 0.25);
  border-color: rgba(99, 179, 237, 0.6);
}

/* ── Remove button ── */
.tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 4px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #7dd3fc;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.tag-remove:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

/* ── Text input ── */
.tag-text-input {
  flex: 1;
  min-width: 7rem;
  border: none;
  background: transparent;
  color: #f2f6ff;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  padding: 0.25rem 0;
}
.tag-text-input::placeholder {
  color: #334155;
}

document.querySelectorAll(".tag-input").forEach(function (container) {
  var textInput = container.querySelector(".tag-text-input");
  var hiddenInput = container.parentElement.querySelector(".tag-hidden-value");

  // Click on container focuses the text input
  container.addEventListener("click", function (e) {
    if (e.target === container) textInput.focus();
  });

  function syncHidden() {
    if (!hiddenInput) return;
    var tags = Array.from(container.querySelectorAll(".tag")).map(function (t) {
      return t.childNodes[0].textContent.trim();
    });
    hiddenInput.value = tags.join(",");
  }

  function makeTag(text) {
    var value = text.trim().replace(/,/g, "");
    if (!value) return;
    // prevent duplicates
    var existing = Array.from(container.querySelectorAll(".tag")).map(function (t) {
      return t.childNodes[0].textContent.trim().toLowerCase();
    });
    if (existing.indexOf(value.toLowerCase()) !== -1) return;

    var tag = document.createElement("span");
    tag.className = "tag";
    tag.tabIndex = 0;
    tag.setAttribute("aria-label", "Remove " + value);
    tag.appendChild(document.createTextNode(value));

    var btn = document.createElement("button");
    btn.className = "tag-remove";
    btn.tabIndex = -1;
    btn.setAttribute("aria-label", "Remove " + value);
    btn.textContent = "×";
    btn.addEventListener("click", function () {
      removeTag(tag);
    });

    tag.appendChild(btn);

    // keyboard removal when tag is focused
    tag.addEventListener("keydown", function (e) {
      if (e.key === "Backspace" || e.key === "Delete") {
        e.preventDefault();
        var prev = tag.previousElementSibling;
        removeTag(tag);
        if (prev && prev.classList.contains("tag")) prev.focus();
        else textInput.focus();
      }
    });

    container.insertBefore(tag, textInput);
    syncHidden();
  }

  function removeTag(tag) {
    tag.remove();
    syncHidden();
  }

  textInput.addEventListener("keydown", function (e) {
    if ((e.key === "Enter" || e.key === ",") && textInput.value.trim()) {
      e.preventDefault();
      makeTag(textInput.value);
      textInput.value = "";
    }
    // remove last tag on backspace when input is empty
    if (e.key === "Backspace" && textInput.value === "") {
      var tags = container.querySelectorAll(".tag");
      if (tags.length) tags[tags.length - 1].focus();
    }
  });

  // also handle comma typed inside value
  textInput.addEventListener("input", function () {
    if (textInput.value.includes(",")) {
      textInput.value.split(",").forEach(function (part) {
        makeTag(part);
      });
      textInput.value = "";
    }
  });

  // Wire up existing remove buttons (pre-populated tags)
  container.querySelectorAll(".tag").forEach(function (tag) {
    var btn = tag.querySelector(".tag-remove");
    if (btn) {
      btn.addEventListener("click", function () {
        removeTag(tag);
      });
    }
    tag.addEventListener("keydown", function (e) {
      if (e.key === "Backspace" || e.key === "Delete") {
        e.preventDefault();
        var prev = tag.previousElementSibling;
        removeTag(tag);
        if (prev && prev.classList.contains("tag")) prev.focus();
        else textInput.focus();
      }
    });
  });
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tag Input</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Tag Input</h1>
    <p class="demo-sub">Press Enter or comma to add tags. Click × or Backspace to remove.</p>

    <section class="section">
      <label class="field-label" for="tag-field-1">Topics</label>
      <div
        class="tag-input"
        id="tag-input-1"
        role="group"
        aria-label="Topics tags"
      >
        <!-- pre-populated tags -->
        <span class="tag" tabindex="0" aria-label="Remove Design">Design<button class="tag-remove" tabindex="-1" aria-label="Remove Design">×</button></span>
        <span class="tag" tabindex="0" aria-label="Remove Frontend">Frontend<button class="tag-remove" tabindex="-1" aria-label="Remove Frontend">×</button></span>
        <span class="tag" tabindex="0" aria-label="Remove Accessibility">Accessibility<button class="tag-remove" tabindex="-1" aria-label="Remove Accessibility">×</button></span>
        <input
          class="tag-text-input"
          id="tag-field-1"
          type="text"
          placeholder="Add topic…"
          aria-label="Add topic"
          autocomplete="off"
          spellcheck="false"
        />
      </div>
      <!-- hidden mirror for form value -->
      <input type="hidden" name="topics" class="tag-hidden-value" value="Design,Frontend,Accessibility" />
    </section>

    <section class="section">
      <label class="field-label" for="tag-field-2">Technologies</label>
      <div
        class="tag-input"
        id="tag-input-2"
        role="group"
        aria-label="Technologies tags"
      >
        <input
          class="tag-text-input"
          id="tag-field-2"
          type="text"
          placeholder="Add technology…"
          aria-label="Add technology"
          autocomplete="off"
          spellcheck="false"
        />
      </div>
      <input type="hidden" name="techs" class="tag-hidden-value" value="" />
    </section>
  </div>

  <script src="script.js"></script>
</body>
</html>