Skip to content

developit/tags-input

Repository files navigation

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>