<h1 align="center"> <a href='https://yaireo.github.io/tagify'><img src="/docs/readme-header.svg" width="320" height="160"></a> <a href='https://yaireo.github.io/tagify'>Tagify</a> - tags input component </h1> Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and small code footprint, exploded with features. Vanilla ⚡ React ⚡ Vue ⚡ Angular <h3 align="center"> 👉 <a href="https://yaireo.github.io/tagify">See Many Examples</a> 👈 </h3> <a href='https://www.npmjs.com/package/@yaireo/tagify'> <img src="https://img.shields.io/npm/v/@yaireo/tagify.svg" /> </a> <a href='https://simple.wikipedia.org/wiki/MIT_License'> <img src="https://img.shields.io/badge/license-MIT-lightgrey" /> </a> <img src="https://img.shields.io/bundlephobia/minzip/@yaireo/tagify" /> <img src="https://img.shields.io/npm/dw/@yaireo/tagify" /> <a href="https://yaireo.github.io/tagify/#section-mix"> <img src="/docs/mix3.gif?sanitize=true" /> </a> <a href="https://yaireo.github.io/tagify/#users-list"> <img src="/docs/demo2.apng?sanitize=true" /> </a>

Table of Contents
Installation
- Option 1 - import from CDN:
- Option 2 - import as a Node module:
Basic Usage Examples
- Debugging
Features
Building the project
- Output files:
Adding tags dynamically
Output value
- Modify original input value format
Ajax whitelist
Persisted data
Edit tags
Validations
Drag & Sort
- Integration example:
DOM Templates
- Example of overriding the tag template:
Suggestions list
- Example for a suggestion item alias
- Example whitelist:
Mixed-Content
Single-Value
React
- Update regarding onChange prop:
  - Updating the component's state
Vue
jQuery version
- jQuery.tagify.js
HTML input & textarea attributes
Caveats
FAQ
CSS Variables
- Suggestions Dropdown CSS variables
- Full list of Tagify's SCSS variables
Methods
Events
Hooks
Settings

Installation

Option 1 - import from CDN:

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

<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" />

Tagify will then be available globally. To load specific version use @ - for example: unpkg.com/@yaireo/tagify@3.1.0

Option 2 - import as a Node module:

npm i @yaireo/tagify --save

Basic Usage Examples

Many demos with code examples can be seen here
CodeSandbox live demo

import Tagify from '@yaireo/tagify'

var inputElem = document.querySelector('input') // the 'input' element which will be transformed into a Tagify component
var tagify = new Tagify(inputElem, {
  // A list of possible tags. This setting is optional if you want to allow
  // any possible tag to be added without suggesting any to the user.
  whitelist: ['foo', 'bar', 'and baz', 0, 1, 2]
})

The above example shows the most basic whitelist array setting possible, with a mix of Strings and Numbers but the array also support Objects which has a must-have property of value:

whitelist: [{value: 'foo', id: '123', email: 'foo@whatever.com'}, ...]

The value property is what will be used when actually defining the value property of the original input element (inputElem in the example above) which was transformed into a Tagify component, and so when the form data is sent to the server, it will contain all the values (which are the selected tags in the component).

For selected tags to show a different text than what is defined in value for a whitelist item, see the tagTextProp setting

⚠️ Important: Don't forget to include tagify.css file in your project. CSS location: @yaireo/tagify/dist/tagify.css SCSS location: @yaireo/tagify/src/tagify.scss See SCSS usecase & example

Debugging

There are several places in the source code which emits console.warn logs to help identify issues. <del>Those will only work if Tagify.logger.enabled flag is set to true</del>. To disable the default logging, set the following global variable:

window.TAGIFY_DEBUG = false

var tagify = new Tagify(...)

Features

Can be applied to input & textarea elements
Supports mix content (text and tags together)
Supports single-value mode (like <select>)
Supports whitelist/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 of the input
Validate tags by Regex pattern or by function
Tags may be editable (double-click)
<del>ARIA accessibility support</del>(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, readonly...)
Automatically disallow duplicate tags (via "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
RTL alignment (See demo)
<del>Internet Explorer - A polyfill script should be used: tagify.polyfills.min.js (in /dist)</del> (IE support has been dropped)
Many useful custom events
Original input/textarea element values kept in sync with Tagify

Building the project

Building this repository requires Node.js 22+ and pnpm 10+ (see package.json engines). From the project root, install dependencies and run the build:

pnpm install
pnpm run build

For local development with watch mode, use pnpm start (runs Gulp with --dev). Gulp is used under the hood; you do not need a global Gulp install if you use the pnpm scripts above.

(Installing the published package in your app — e.g. npm i @yaireo/tagify — is unchanged; the Node/pnpm requirements apply to contributors building Tagify from source.)

Source files are this path: /src/

Output files, which are automatically generated using Gulp, are in: /dist/

Output files:

Filename | Info ------------------------------------ | ----------------------------------------------------------- tagify.esm.js | ESM version. see jsbin demo tagify.js | minified UMD version, including its sourcemaps. This is the main file the package exports. tagify.polyfills.min.js | Used for old Internet Explorer browser support react.tagify.js | Wrapper-only for React. Read more <del>jQuery.tagify.min.js</del> | jQuery wrapper - same as tagify.js. Might be removed in the future. (Deprecated as of APR 24') tagify.css |

Adding tags dynamically

var tagify = new Tagify(...);

tagify.addTags(["banana", "orange", "apple"])

// or add tags with pre-defined properties

tagify.addTags([{value:"banana", color:"yellow"}, {value:"apple", color:"red"}, {value:"watermelon", color:"green"}])

Output value

There are two possible ways to get the value of the tags:

Access the tagify's instance's value prop: tagify.value (Array of tags)
Access the original input's value: inputElm.value (Stringified Array of tags)

The most common way is to simply listen to the change event on the original input

var inputElm = document.querySelector('input'),
    tagify = new Tagify (inputElm);

inputElm.addEventListener('change', onChange)

function onChange(e){
  // outputs a String
  console.log(e.target.value)
}

Modify original input value format

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

I recommend keeping this beca

Tagify

Install / Use

README

Table of Contents