Tiny Text Field Based Tags Input Plugin For jQuery - Tagify

Tiny Text Field Based Tags Input Plugin For jQuery - Tagify
File Size: 124 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.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.