Multi Email Input — Recipient Chips HTML CSS JS

<div class="mei-card">
  <label class="mei-label" for="meiInput">Invite teammates</label>
  <div class="mei-box" id="meiBox">
    <span class="mei-chips" id="meiChips"></span>
    <input type="text" id="meiInput" placeholder="Add emails, separated by Enter or comma" autocomplete="off">
  </div>
  <p class="mei-hint" id="meiHint">Press Enter, comma, or paste a list to add multiple at once.</p>
  <button type="button" class="mei-send" id="meiSend" disabled>Send <span id="meiCount"></span> invites</button>
</div>

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

.mei-card{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:440px;box-shadow:0 18px 44px rgba(15,23,42,.1)}
.mei-label{display:block;font-size:13px;font-weight:700;color:#334155;margin-bottom:8px}

.mei-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border:1.5px solid #e2e8f0;border-radius:11px;padding:8px 10px;min-height:46px;cursor:text;transition:border-color .15s,box-shadow .15s}
.mei-box.focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.mei-chips{display:contents}
.mei-input-grow{flex:1;min-width:140px}
.mei-box input{flex:1;min-width:140px;border:none;outline:none;font-size:13.5px;font-family:inherit;color:#0f172a;padding:5px 2px}

.mei-chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #e0e7ff;border-radius:7px;padding:4px 7px 4px 9px;font-size:12.5px;font-weight:600;color:#4338ca;max-width:100%}
.mei-chip.invalid{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.mei-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mei-chip button{border:none;background:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;opacity:.65;padding:0}
.mei-chip button:hover{opacity:1}

.mei-hint{font-size:11.5px;color:#94a3b8;margin:9px 0 16px}
.mei-hint.error{color:#dc2626;font-weight:600}

.mei-send{width:100%;background:#6366f1;color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,opacity .15s}
.mei-send:hover:not(:disabled){background:#4f46e5}
.mei-send:disabled{opacity:.45;cursor:not-allowed}

var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var box = document.getElementById('meiBox');
var input = document.getElementById('meiInput');
var chipsEl = document.getElementById('meiChips');
var emails = [];   // { value, valid }

function addEmail(raw) {
  var v = raw.trim().replace(/[,;]$/, '');
  if (!v) return;
  if (emails.some(function (e) { return e.value.toLowerCase() === v.toLowerCase(); })) return; // dedupe
  emails.push({ value: v, valid: EMAIL_RE.test(v) });
}

function commit(text) {
  // Split on commas, semicolons, spaces, and newlines so a pasted list works.
  text.split(/[\s,;]+/).forEach(addEmail);
  input.value = '';
  render();
}

function render() {
  chipsEl.innerHTML = emails.map(function (e, i) {
    return '<span class="mei-chip' + (e.valid ? '' : ' invalid') + '" title="' + e.value + (e.valid ? '' : ' (invalid)') + '">' +
      '<span>' + e.value + '</span>' +
      '<button type="button" data-i="' + i + '" aria-label="Remove">✕</button></span>';
  }).join('');
  var valid = emails.filter(function (e) { return e.valid; });
  var invalid = emails.length - valid.length;
  var send = document.getElementById('meiSend');
  send.disabled = valid.length === 0 || invalid > 0;
  document.getElementById('meiCount').textContent = valid.length ? valid.length : '';
  var hint = document.getElementById('meiHint');
  if (invalid > 0) { hint.textContent = invalid + ' address' + (invalid > 1 ? 'es are' : ' is') + ' invalid — fix or remove to continue.'; hint.className = 'mei-hint error'; }
  else { hint.textContent = 'Press Enter, comma, or paste a list to add multiple at once.'; hint.className = 'mei-hint'; }
}

input.addEventListener('keydown', function (e) {
  if (e.key === 'Enter' || e.key === ',' || e.key === ';') { e.preventDefault(); commit(input.value); }
  else if (e.key === 'Backspace' && input.value === '' && emails.length) { emails.pop(); render(); }
});
input.addEventListener('blur', function () { if (input.value.trim()) commit(input.value); box.classList.remove('focus'); });
input.addEventListener('focus', function () { box.classList.add('focus'); });
input.addEventListener('paste', function (e) {
  e.preventDefault();
  commit((e.clipboardData || window.clipboardData).getData('text'));
});

chipsEl.addEventListener('click', function (e) {
  var btn = e.target.closest('button[data-i]');
  if (!btn) return;
  emails.splice(+btn.dataset.i, 1);
  render();
});

box.addEventListener('click', function (e) { if (e.target === box || e.target === chipsEl) input.focus(); });

document.getElementById('meiSend').addEventListener('click', function () {
  var list = emails.filter(function (e) { return e.valid; }).map(function (e) { return e.value; });
  // Send invites to the addresses in the list array here.
  this.textContent = '✓ ' + list.length + ' invites sent';
});

render();