Bootstrap 4 Tag Input Plugin With jQuery - Tagsinput.js

Bootstrap 4 Tag Input Plugin With jQuery - Tagsinput.js

Tagsinput.js is a jQuery extension to make theĀ Bootstrap Tags Input jQuery plugin work with the latest version of Bootstrap 4 framework.

The Bootstrap Tags Input plugin allows you to add, remove, manager, manipulate tags and tokens with Twitter Bootstrap user interface.

1. Include the jQuery Tagsinput.js plugin's file on your Bootstrap 4 project as these:

<!-- Stylesheet -->
<link rel="stylesheet" 
<link href="tagsinput.css" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="" 
<script src="" 
<script src=""
<script src="tagsinput.js"></script>

2. Add the data-role="tagsinput" attribute to input fields or select elements and done.

<input type="text" data-role="tagsinput" value="jQuery,Script,Net">
<select multiple data-role="tagsinput">
  <option value="jQuery">jQuery</option>
  <option value="Angular">Angular</option>
  <option value="React">React</option>
  <option value="Vue">Vue</option>

3. You can also dynamically add the tags using add method as these:

$('input').tagsinput('add', { "value": 1 , "text": "jQuery"});
$('input').tagsinput('add', { "value": 2, "text": "Script"});
$('input').tagsinput('add', { "value": 3, "text": "Net"});

4. Get the selected values.


5. Get the selected tags.


6. All possible plugin options.

  tagClass: function(item) {
    return 'badge badge-info';
  focusClass: 'focus',
  itemValue: function(item) {
    return item ? item.toString() : item;
  itemText: function(item) {
    return this.itemValue(item);
  itemTitle: function(item) {
    return null;
  freeInput: true,
  addOnBlur: true,
  maxTags: undefined,
  maxChars: undefined,
  confirmKeys: [13, 44],
  delimiter: ',',
  delimiterRegex: null,
  cancelConfirmKeysOnEmpty: false,
  onTagExists: function(item, $tag) {
  trimValue: false,
  allowDuplicates: false,
  triggerChange: true

This awesome jQuery plugin is developed by Nodws. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 20.11.2017
  • Source