Type something and press Enter (then re-arrange tags)

List results:

Pre-existing List:

List1
List2
List3

Type something and press Enter (Try: 'sad', 'stuck', 'boom!', then try deleting)

List results:

Try Escape, Arrow Keys, Ctrl Key, etc.

List results:

Why Input2Tags?

Built for developers who need reliable text-to-tag conversion without the overhead.

Ultra Flexible

Minimal footprint, zero external dependencies, key hooks to allow you to craft your tag-requirement for your project.

No Dependencies

Pure vanilla JavaScript, ready-shipped in a flexible npm package for use anywhere.

Component Ready

Full TypeScript support, and comes with sample components to use various frameworks.

Let's Go!

If you've reviewed the above examples, you're ready to use it: it's that simple! Load up your code editor and let's install it.

Or see more examples basic example, advanced example, another advanced example. (right click to view source).

Or try in a CodePen.io example.

NPM

npm install input2tags

YARN

yarn add input2tags

USAGE EXAMPLE

// import CSS 
//<link rel="stylesheet" href="https://unpkg.com/input2tags@latest/style" />
import Input2Tags from "https://unpkg.com/input2tags@latest?module"

const inputEl = document.getElementById('tagInput');
const input2Tags = new Input2Tags(inputEl, {
    onChange: (tags) => console.log( tags?.join(',') || '' ),
    });

Effortless Dynamic Tag Management Managing user-generated input shouldn't be a headache for modern web developers. Input2Tags is a lightweight, high-performance JavaScript input tag creator designed to streamline the creation and management of interactive badges. Whether you are building a hashtag generator for social platforms, a category manager for e-commerce, or a skill-picker for user profiles, this tool converts raw text into customizable, draggable badges in real-time. Built with a focus on Bootstrap 5 and TailwindCSS compatibility and a "mobile-first" philosophy, it offers a robust, dependency-free solution for developers seeking a professional UI for dynamic list inputs.

Built for Developers, Optimized for UX Beyond simple visual conversion, Input2Tags provides a complete utility suite for tag manipulation and data export. Users can effortlessly re-arrange badges with intuitive drag-and-drop functionality, delete items on the fly, and instantly pull the final selection as a clean, comma-separated list (CSV). As an open-source project hosted on GitHub, it prioritizes developer experience with a minimal footprint and a highly themeable CSS structure—perfect for dark-themed dashboards and modern web apps. If you are looking for a flexible JavaScript badge library that balances simplicity with powerful customization, Input2Tags is the definitive utility for your next project.