Tiny Text Field Based Tags Input Plugin For jQuery - Tagify

Tiny Text Field Based Tags Input Plugin For jQuery - Tagify
File Size: 189 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Tagify is a tiny jQuery plugin used to generate a simple, animated, high-performance tag / token input from either input field or textarea. It also provides a vanilla JavaScript version which allows you to implement the tags input in pure JavaScript. 


  • Auto prevent duplicate tags.
  • Auto split input text into tags by comma or Enter key.
  • Compatible with Bootstrap 4 and Bootstrap 3.

How to use it:

1. Put the main style sheet tagify.css in the head:

<link href="tagify.css" rel="stylesheet">

2. Include the JavaScript file jQuery.tagify.js after jQuery.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jQuery.tagify.js"></script>

3. You can also include the vanilla JS version if you'd like to implement the Tagify in pure JavaScript.

<script src="tagify.js"></script>

4. Create a normal input field or textfield for the tag input. You can set the predefined tags in the value attribute as follow:

<input name="tags" placeholder="write some tags" value="predefined tags here">

5. Initialize the Tagify and done.

// jQuery

// Vanilla JavaScript
var input = document.querySelector('input[name=tags]'),
tagify = new Tagify( input );

6. Enable the duplicate detection.

$('[name=tags]').tagify({duplicates : false});

7. More configuration options.


  // [regex] split tags by any of these delimiters ("null" to cancel)
  delimiters: ",", 

  // regex pattern to validate input by. 
  pattern: null, 

  // maximum number of tags
  maxTags: Infinity, 

  // exposed callbacks object to be triggered on certain events
  callbacks: {}, 

  // automatically adds the text which was inputed as a tag when blur event happens
  addTagOnBlur: true, 

  // allow tuplicate tags
  duplicates: false, 

  // is this list has any items, then only allow tags from this list
  whitelist: [], 

  // a list of non-allowed tags
  blacklist: [], 

  // should ONLY use tags allowed in whitelist
  enforceWhitelist: false, 

  // tries to autocomplete the input's value while typing
  autoComplete: true, 

  // String - when tags have multiple properties, and for each tag another property should be used besides the "value"
  mapValueToProp: "", 

  dropdown: {
    classname: '',
    enabled: 2, // minimum input characters needs to be typed for the dropdown to show
    maxItems: 10

8. API methods.

var myInput = $('[name=tags]').tagify();

// adds new tag
// String (word, single or multiple with a delimiter) or an Array of Objects

// removes a specific tag

// removes all tags

// destroy the plugin

9. Events.

var myInput = $('[name=tags]').tagify();

.on('add', function(e, tagName){
  // on add

.on('remove', function(e, tagName){
  // on remove

.on('duplicate', function(e, tagName){
  // on duplicate

.on('maxTagsExceed', function(e){
  // on maxTagsExceed

.on('blacklisted', function(e, tagName){
  // on blacklisted

.on('notWhitelisted', function(e, tagName){
  // on notWhitelisted


v2.28.2 (2019-09-14)

  • CSS bugfix.

v2.28.0 (2019-09-12)

  • CSS bugfix.

v2.26.3 (2019-09-02)

  • Fixed: Empty tag (via editing) *is* invalid, but remains, even with `keepInvalidTags: false`

v2.26.2 (2019-08-31)

  • Fixed: Safari (11.1.2): Can't edit tags (includes proposed fix)

v2.26.1 (2019-08-31)

  • Cleanup annoying "[addTags] no tags to add: Array []" console warning

v2.26.0 (2019-08-29)

  • Fixed Syntax error in React wrapper compilation

v2.25.3 (2019-08-28)

  • bugfix: when clicking anywhere on the screen there was an error in the console

v2.25.2 (2019-08-24)

  • Fixed: conflict "RENDER SUGGESTIONS LIST MANUALLY" Property with "TEXTAREA"
  • Fixed: Pasted text separated with new line symbol doesn't process correct

v2.24.0 (2019-08-18)

  • Remove "hasMaxTags" class when limit is not reached anymore

v2.23.1 (2019-07-30)

  • Remove "hasMaxTags" class when limit is not reached anymore

v2.22.3 (2019-06-19)

  • Fixed Pressing Enter while Suggestion List is open

v2.22.2 (2019-06-16)

  • Fixed Loading CSS Error

v2.22.1 (2019-06-06)

  • "removeTag" without an argument now removes last tag automatically
  • fixed Input value sent changed 

v2.21.0 (2019-05-29)

  • More bugs fixed

v2.19.0 (2019-05-15)

  • More bugs fixed.

v2.19.0 (2019-05-15)

  • More bugs fixed.

v2.18.2 (2019-05-02)

  • fixed demo IE11 issues

v2.18.1 (2019-04-27)

  • minor insignificant changes in code

v2.17.0 (2019-04-14)

  • fixed a minor bug from previous commit

v2.16.0 (2019-04-11)

  • Fixed: Incorrect interaction between enabled and maxItems for dropdown

v2.15.2 (2019-04-06)

  • Fix exception when input initial value is an empty json list

v2.15.1 (2019-03-26)

  • fixes dropdown mouse click to scroll
  • fixes whitelist of strings suggestions list HTML
  • fixes focus after clicking a suggestion item with the mouse
  • added "searchBy" property support for whitelist alias filtering

v2.15.0 (2019-03-27)

  • Bugfix

v2.14.0 (2019-02-27)

  • fixed removeTag is not working.

v2.13.0 (2019-02-26)

  • Deleting (backspacing) current tag input to the end, makes subsequent input change into tag immediately

v2.12.6 (2019-02-24)

  • Bugfix

v2.12.1 (2019-02-15)

  • Add duplicates in mix mode if duplicates setting false.

v2.11.1 (2019-01-27)

  • Add duplicates in mix mode if duplicates setting false.
  • Fixed placeholder does not update when changing dropdown active item using down arrow

v2.10.1 (2019-01-03)

  • Make blacklist works case-insensitive

v2.9.7 (2018-12-30)

  • Fixed Error when clicking outside of dropdown 

v2.9.1 (2018-12-17)

  • Changed the "input" event parameter to be a string (value) instead of an Object {value:value}

v2.9.0 (2018-12-16)

  • added custom "click" event

v2.8.6 (2018-12-14)

  • Bugfix

v2.8.5 (2018-12-10)

  • minor fix for editable tags blur event not working property

v2.8.4 (2018-12-09)

  • fixed: edit tag not running tag validation

v2.8.2 (2018-11-18)

  • Fixed an issue while pre-populating an unique numeric tag

v2.7.6 (2018-11-18)

  • Bugfix

v2.6.5 (2018-11-03)

  • Fixed: Duplicates tag in Internet Explorer if tag has "@" symbol and delimiter is space bar.

v2.6.3 (2018-10-27)

  • "input" event wasn't triggered in the optimal place. should be triggered after this.input.set
  • "filterListItems" method should not strip whitespaces

v2.6.0 (2018-10-12)

  • Bugfixes

v2.5.1 (2018-10-06)

  • Bugfixes

v2.2.10 (2018-09-24)

  • Bugfixes

v2.1.9 (2018-09-08)

  • Fixed Trigger dropdown

v2.1.4 (2018-08-18)

  • Tiny bug fix in "normalizeTags" where Tagify instances with complex whitelist didn't allow entering any other tags except the whitelist's ones

v2.1.1 (2018-08-12)

  • You can add Tags in the readonly mode

v2.1.0 (2018-07-08)

  • general refactoring


  • Fixed for key/value tags


  • Bootstrap 4 Support


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