Pure JavaScript Solution for Creating Tags Input Element

Tags Input Library is a small JavaScript plug-in that converts a regular input field into a tagging system for easier tag input.

How to make use of it:

Create a normal text area on the web page.

<input type="text" id="example">

Include the JavaScript file ‘tags-input.js’ in the webpage.

<script src="tags-input.js"></script>

Initialize the tags input plugin on the textual content area.

var instance = new TagsInput({
    selector: 'example'

Add pre-selected tags to the tags input.

instance.addData(['HTML' , 'JavaScript' , 'CSS'])

This will convert the textual content area into…

<div class="tags-input-wrapper">  
  <span class="tag">JavaScript<a>×</a></span>
  <span class="tag">CSS<a>×</a></span>
<span class="tag">WebCodeFlow<a>×</a></span> <input> </div> <input type="text" id="example" hidden="true">

Read Also – Tags Input Field Made With HTML/CSS and JavaScript

Apply your personal types to the tags input.

  background: transparent;
  padding: 10px;
  border-radius: 4px;
  max-width: 400px;
  border: 1px solid #ccc

.tags-input-wrapper input{
  border: none;
  background: transparent;
  outline: none;
  width: 150px;

.tags-input-wrapper .tag{
  display: inline-block;
  background-color: #fa0e7e;
  color: white;
  border-radius: 40px;
  padding: 0px 3px 0px 7px;
  margin-right: 5px;
  box-shadow: 0 5px 15px -2px rgba(250 , 14 , 126 , .7)

.tags-input-wrapper .tag a {
  margin: 0 7px 3px;
  display: inline-block;
  cursor: pointer;

Specify the utmost variety of tags allowed to insert.

var instance = new TagsInput({
    max : 10

Enable/disable duplicate detection.

var instance = new TagsInput({
    duplicate : true

Set the wrapper ingredient for the tags input.

var instance = new TagsInput({
    wrapperClass : 'tags-input-wrapper'

Minimal Tags Input Plugin, Tags Input Library Plugin/Github

Read More Here – 

Vue.js Component for Adding and Removing Tags
Dynamic Tag Cloud Generator With Pure JavaScript | tagsCloud.js
Tag Cloud Plugin For jQuery Shows Larger Tags | jquery.tagcloud

See Demo And Download

Official Website(iamqamarali): Click Here

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