Bootstrap 5 Tags Input with Dropdown Select

This tutorial will guide you through creating a Bootstrap 5 tags input with a dropdown select. This enhanced input field allows users to select multiple tags from a dropdown list, providing a user-friendly experience for selecting and managing tags. We will use a JavaScript library to achieve the desired functionality.

Step 1: Include Bootstrap and JavaScript Library

First, you need to include Bootstrap 5 CSS and JavaScript files in the header of your HTML document. This will provide the styling and functionality for the Bootstrap components.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" type="module"></script>

Step 2: Create the HTML Structure

Next, create the HTML structure for your tags input. This involves creating a standard select element with the multiple attribute to enable multiple selections. We’ll also add some additional attributes for styling and functionality.

<script type="module">
    import Tags from "https://cdn.jsdelivr.net/gh/lekoala/bootstrap5-tags@master/tags.js";
    Tags.init("select");
  </script>

  <div class="container">
    <h1>Demo</h1>
    <form class="needs-validation" novalidate method="get" action="https://vercel-dumper.vercel.app/">
      <div class="row mb-3 g-3">
        <div class="col-md-4">
          <label for="validationTags" class="form-label">Tags</label>
          <select class="form-select" id="validationTags" name="tags[]" multiple>
            <option selected disabled hidden value="">Choose a tag...</option>
            <option value="1" selected="selected">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Orange</option>
          </select>
          <div class="invalid-feedback">Please select a valid tag.</div>
        </div>
      </div>
      <div class="row mb-3 g-3">
        <div class="col-md-4">
          <label for="validationTagsClear" class="form-label">Tags (allow clear)</label>
          <select class="form-select" id="validationTagsClear" name="tagsClear[]" multiple data-allow-clear="true">
            <option selected disabled hidden value="">Choose a tag...</option>
            <option value="1" selected="selected">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Orange</option>
          </select>
          <div class="invalid-feedback">Please select a valid tag.</div>
        </div>
      </div>
      <div class="row mb-3 g-3">
        <div class="col-md-4">
          <label for="validationTagsThreshold" class="form-label">Tags (allow clear + 0 threshold)</label>
          <select class="form-select" id="validationTagsThreshold" name="tagsClearThreshold[]" multiple data-allow-clear="true" data-suggestions-threshold="0">
            <option selected disabled hidden value="">Choose a tag...</option>
            <option value="1" selected="selected">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Orange</option>
          </select>
          <div class="invalid-feedback">Please select a valid tag.</div>
        </div>
      </div>
      <div class="row mb-3 g-3">
        <div class="col-md-4">
          <label for="validationTagsShow" class="form-label">Tags (show all + custom color)</label>
          <select class="form-select" id="validationTagsShow" name="tags_show[]" multiple data-show-all-suggestions="true">
            <option selected disabled hidden value="">Choose a tag...</option>
            <option value="1" selected="selected">Apple</option>
            <option value="2" data-badge-style="success" selected="selected">Banana</option>
            <option value="3" data-badge-style="warning" data-badge-class="text-dark">Orange</option>
            <option value="4" data-badge-style="secondary">Blueberry</option>
            <option value="5">Strawberry</option>
            <option value="6">Cranberry</option>
            <option value="7">Huckleberry</option>
            <option value="8">Chokeberry</option>
            <option value="9">Elderberry</option>
            <option value="10">Gooseberry</option>
            <option value="11">Blackberry</option>
            <option value="12">Raspberry</option>
            <option value="13">Goji berry</option>
            <option value="14">Salmon berry</option>
            <option value="15">Sumac berry</option>
          </select>
          <div class="invalid-feedback">Please select a valid tag.</div>
        </div>
      </div>
      <div class="row mb-3 g-3">
        <div class="col-md-4">
          <label for="validationTagsNew" class="form-label">Tags (allow new)</label>
          <select class="form-select" id="validationTagsNew" name="tags_new[]" multiple data-allow-new="true">
            <option selected disabled hidden value="">Choose a tag...</option>
            <option value="1" selected="selected">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Orange</option>
          </select>
          <div class="invalid-feedback">Please select a valid tag.</div>
        </div>
      </div>
      <div class="row mb-3 g-3">
        <div class="col-md-4">
          <label for="singleTags" class="form-label">Tags (single)</label>
          <select class="form-select" id="singleTags" name="tags_single" data-allow-clear="1" data-suggestions-threshold="0">
            <option disabled hidden value="">Choose a tag...</option>
            <option value="1">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Orange</option>
          </select>
        </div>
      </div>
       <div class="row mb-3 g-3">
        <div class="col-md-4">
          <label for="separatorTags" class="form-label">Tags (with space and comma separator)</label>
          <select class="form-select" id="separatorTags" name="tags_separator[]" multiple data-allow-new="true" data-separator=" |,|  ">
            <option value="">Type a tag...</option><!-- you need at least one option with the placeholder -->
          </select>
        </div>
      </div>
      <input type="reset" value="Reset" class="btn btn-outline-dark">
      <button class="btn btn-primary" type="submit">Submit form</button>
    </form>
  </div>

Step 3: Add CSS Styling (Optional)

This step is optional, but you can add custom CSS to further style your tags input. The following CSS will add styling to the input field when it’s in focus and valid or invalid states.

  .form-control-focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.was-validated :valid + .form-control-focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.was-validated :invalid + .form-control-focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

Step 4: Include JavaScript Initialization

Finally, add JavaScript code to initialize the tags input. This will enable the dropdown select functionality and enhance the user interaction.

Congratulations! You’ve successfully created a Bootstrap 5 tags input with a dropdown select.