Tagify screenshot

Tagify

Author Avatar Theme by Yaireo
Updated: 8 May 2025
3746 Stars

lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue

Categories

Overview

This product analysis discusses Tagify, a versatile tool that can be applied to input and textarea elements. It supports various features such as mix content (text and tags together), single-value mode, whitelist/blacklist, customizable HTML templates, suggestions list, and more.

Features

  • Supports mix content (text and tags together)
  • Supports single-value mode (like <select>)
  • Supports whitelist/blacklist
  • Customizable HTML templates for different areas of the component
  • Shows suggestions list at full width or next to the typed text
  • Allows setting suggestions’ aliases for easier fuzzy-searching
  • Auto-suggest input with auto-complete
  • Editable tags (double-click)

Installation

Option 1 - Import from CDN:

Place these lines before any other code using Tagify:

<script src="https://unpkg.com/@yaireo/tagify"></script>

Option 2 - Import as a Node module:

npm install @yaireo/tagify

Summary

Tagify is a powerful tool for working with tags in input and textarea elements. It offers a wide range of features such as support for mix content, customizable templates, suggestions list, and more. Whether you need a single-value mode or a whitelist/blacklist functionality, Tagify can cater to diverse tagging requirements. Its ease of installation and rich feature set make it a valuable addition to web development projects.