Skip to content
🔖 <input type="tags"> like magic
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 04a9bb9 Dec 14, 2016
Permalink
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
.gitignore
.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
README.md 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
tags-input.css.map Include built files Apr 29, 2016
tags-input.js 1.1.1 Jun 16, 2016
tags-input.js.map 1.1.1 Jun 16, 2016

README.md

tags-input

NPM Version Bower Version Gitter Room

Features:

  • 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+

Screenshot:

screenshot

JSFiddle Demo


Examples

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.

CommonJS:

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

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

// enhance an existing input:
tagsInput(document.querySelector('input[type="tags"]'));

// or just enhance all tag inputs on the page:
[].forEach.call(document.querySelectorAll('input[type="tags"]'), tagsInput);

HTML Example:

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

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

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