Easy Tags Input Component For Bootstrap 5 – Tags.js

A vanilla JavaScript (ES6) extension to Bootstrap 5 that converts a multi-select box into a user-friendly tags input component.

How to use it:

1. Import the Tags.js.

import Tags from "./tags.js";

2. Initialize the library.

Tags.init();

3. That’s it. It will automatically convert all select boxes with the multi attribute into a tags input where you can select options from a suggestion list while typing.

<select class="form-select" id="validationTags" multiple>
  <option selected disabled hidden value="">Choose a tag...</option>
  <option value="1" selected="selected">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  <option value="4">jQuery</option>
  <option value="5">React</option>
  <option value="6">Angular</option>
  <option value="7">Vue</option>
  <option value="8">Python</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>

4. Add the data-allow-new="true" to the select box in cases where you want to add new options.

<select class="form-select" id="validationTags" multiple data-allow-new="true">
  <option selected disabled hidden value="">Choose a tag...</option>
  <option value="1" selected="selected">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  <option value="4">jQuery</option>
  <option value="5">React</option>
  <option value="6">Angular</option>
  <option value="7">Vue</option>
  <option value="8">Python</option>
</select>

The post Easy Tags Input Component For Bootstrap 5 – Tags.js appeared first on CSS Script.