A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of features.

Modify the original input value format

The default format is a JSON string:
'[{"value":"cat"}, {"value":"dog"}]'

recommend keeping this because some situations might have values such as addresses (tags contain commas):
'[{"value":"Apt. 2A, Jacksonville, FL 39404"}, {"value":"Forrest Ray, 191-103 Integer Rd., Corona New Mexico"}]'

Another example of complex tags state might be disabled tags or ones with custom identifier class:
(tags can be clicked, so developers can choose to use this to disable/enable tags)
'[{"value":"cat", "disabled":true}, {"value":"dog"}, {"value":"bird", "class":"color-green"}]'

Ajax whitelist

A dynamically loaded list of suggestions (whitelist) from the server (depending on user types) is a recurring need for many.

Tagify comes with its own loading animation, and it’s very lightweight CSS-only code, and the loading state is controlled by the method tagify.loading which accepts true or false as arguments.

persistent data

Sometimes the whitelist may be loaded asynchronously, thus any pre-filled value in the original input field will be removed if forceceWhitelist is set to true.

Edit tags

Tags that are not read-only can be edited by double-clicking them (by default) or by changing the Edit Tags setting to 1, which makes the tags editable by clicking them once.


For “regular” tags (not blend mode or select mode), the easiest way is to use the style setting and use a Regex, or apply the style attribute directly to the input that will be “transformed” to the Tagify component (for vanilla code where the input tag is fully accessible to developers).

If the setting style doesn’t meet your needs, use the validation set, which receives the tag data object as an argument and should return true if validation is passed, or false/string is not. A string may be returned as the reason for the validation failure, so it will be printed as the address attribute of the invalid tag.

Drag and sort

To be able to sort tags by dragging a third-party script is required.

DOM templates

It is possible to control the templates for some of the HTML elements that Tagify uses by modifying the settings.

Must Read: Tags Input Field Made With HTML/CSS and JavaScript


  • Can be applied to input & textarea elements
  • Supports mixed content (text and tags together)
  • Supports single-value mode (like <select>)
  • Supports whitelisting/blacklist
  • Customizable HTML templates for the different areas of the component (wrapper, tags, dropdown, dropdown item, dropdown header, dropdown footer)
  • Shows suggestions list (flexible settings & styling) at full (component) width or next to the typed text (caret)
  • Allows setting suggestions’ aliases for easier fuzzy-searching
  • Auto-suggest input as-you-type with the ability to auto-complete
  • Can paste in multiple values: tag 1, tag 2, tag 3 or even newline-separated tags
  • Tags can be created by Regex delimiter or by pressing the “Enter” key/focusing on the input
  • Validate tags by Regex pattern or by function
  • Tags may be editable (double-click)
  • ARIA accessibility support(Component too generic for any meaningful ARIA)
  • Supports read-only mode to the whole component or per-tag
  • Each tag can have any properties desired (class, data-whatever, read-only…)
  • Automatically disallow duplicate tags (vis “settings” object)
  • Has built-in CSS loader, if needed (Ex. AJAX whitelist pulling)
  • Tags can be trimmed via hellip by giving max-width to the tag element in your CSS
  • Easily change direction to RTL (via the SCSS file)
  • Internet Explorer – A polyfill script should be used: tagify.polyfills.min.js (in /dist) (IE support has been dropped)
  • Many useful custom events
  • Original input/textarea element values kept in sync with Tagify

How to make use of it

1. Place these lines before any other code which is (or will be) using Tagify.

<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />

2. Import as a Node module:

npm i @yaireo/tagify --save

3. Usage (in your bundle):

import Tagify from '@yaireo/tagify'

var tagify = new Tagify(...)

See Demo And Download


Official Website(yairEO): Click Here

This superior jQuery/javascript plugin is developed by yairEO. For extra Advanced Usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…


Simple Web-Rich Text Editor That Can Export HTML

Rich Text Editor is a simple HTML export web text editor developed with the jQuery library, Bootstrap framework, and the iconic Font Awesome font. Editor Buttons: Undo…

Leave a Reply

Your email address will not be published. Required fields are marked *