Skip to content
🔖 <input type="tags"> like magic
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 04a9bb9 Dec 14, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix for input types withot selection support Nov 24, 2016
.babelrc Fix incorrect sourcemap root and remove AMD name. Aug 24, 2015
.editorconfig editorconfig Jun 16, 2016
.jshintrc Switch the project to ES6 (via babel) & LESS (via lessc). Aug 23, 2015
.npmignore Add npmignore Aug 24, 2015
LICENSE Repo setup stuff Nov 8, 2014 Mention browser support in README (issue #15) May 27, 2016
bower.json 1.0.2 Aug 24, 2015
index.html add example/test Nov 25, 2016
package.json 1.1.1 Jun 16, 2016
tags-input.css Include built files Apr 29, 2016 Include built files Apr 29, 2016
tags-input.js 1.1.1 Jun 16, 2016 1.1.1 Jun 16, 2016


NPM Version Bower Version Gitter Room


  • I said <input type="tags"> should be a thing.
  • With full keyboard, mouse and focus support.
  • Works with HTML5 pattern and placeholder attributes, too!
  • Native change and input ("live" change) events.
  • Using preact? (or react?) There's a wrapper called preact-token-input
  • Works in modern browsers and IE10+



JSFiddle Demo


It's easy to use! In addition to the example code, you'll also need to include tags-input.css - I didn't bundle it because that's a bit gross.


var tagsInput = require('tags-input');

// create a new tag input:
var tags = document.createElement('input');
tags.setAttribute('type', 'tags');

// enhance an existing input:

// or just enhance all tag inputs on the page:
[]'input[type="tags"]'), tagsInput);

HTML Example:

<link rel="stylesheet" href="tags-input.css">
<script src="tags-input.js"></script>

		Add some
		<input name="hashtags" type="tags" pattern="^#" placeholder="#hashtags">

<script>[]'input[type="tags"]'), tagsInput);</script>
You can’t perform that action at this time.