Bootstrap 5 · Intermediate

Tag Input Field

A tag input that turns typed words into removable Bootstrap badges.

Requires Bootstrap 5. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="card border-0 shadow-sm" style="max-width:360px"><div class="card-body">
  <label class="form-label small fw-semibold">Skills</label>
  <div class="form-control d-flex flex-wrap gap-1 align-items-center" id="tagBox" style="min-height:46px">
    <span class="badge text-bg-primary d-flex align-items-center gap-1">design <span style="cursor:pointer">×</span></span>
    <input class="border-0 flex-fill" id="tagInput" style="outline:none;min-width:80px" placeholder="Add…">
  </div>
  <small class="text-secondary">Enter to add</small>
</div></div>

var box=document.getElementById('tagBox'),inp=document.getElementById('tagInput');
function bind(x){x.querySelector('span').onclick=function(){x.remove()}}
box.querySelectorAll('.badge').forEach(bind);
inp.addEventListener('keydown',function(e){if(e.key==='Enter'&&inp.value.trim()){e.preventDefault();var b=document.createElement('span');b.className='badge text-bg-primary d-flex align-items-center gap-1';b.innerHTML=inp.value.trim().replace(/[<>&]/g,'')+' <span style="cursor:pointer">×</span>';box.insertBefore(b,inp);bind(b);inp.value=''}});

Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.