Simple Tiny Tags Input Plugin For Bootstrap 5 Framework

Preview:

Description:

A simple and customizable tags input plugin for the latest Bootstrap 5 framework. Built with Vanilla JavaScript, no jQuery is required.

It allows the user to type multiple entries in an input field, which will be broken up into tokens/tags/chips when a Split Character is typed. The tags will be stored as a comma-separated list in a hidden input.

How to use it:

1. Load the JavaScript tags.js and Stylesheet tags.css in your document.

<!-- Bootstrap is required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Tags Input Plugin -->
<link rel="stylesheet" href="/path/to/tags.css" />
<script src="/path/to/tags.js"></script>

2. Create the HTML for the tags input. The data-name attribute is used to define the name of the hidden input.

<div class="tags-input form-control" data-name="example"></div>

3. Initialize the tags input plugin and done.

window.onload = function(event) {
  initTags();
}

4. Style the tags using the Bootstrap’s Colors utility.

<div class="tags-input form-control tag-bg-primary"></div>
<div class="tags-input form-control tag-bg-secondary"></div>
<div class="tags-input form-control tag-bg-success"></div>
<div class="tags-input form-control tag-bg-danger"></div>
<div class="tags-input form-control tag-bg-warning"></div>
<div class="tags-input form-control tag-bg-info"></div>
<div class="tags-input form-control tag-bg-light"></div>
<div class="tags-input form-control tag-bg-dark"></div>
...

5. Customize the Split Character. Default: , ; Enter.

<div class="tags-input form-control" data-splitchars="[;']"></div>