Tags is a user friendly handler for a tags/tokens input field. It initializes over a normal input field that contains a coma separated tags list and makes a more user-friendly and css customizable widget out of it.

Get the latest version right here

All the source code of the project is available under terms of the MIT license


For some standard usage examples see the demo page


top ↑Features List

  • CSS-customizable interface
  • Automatic initialization
  • Simple usage
  • Small size (3.2k gzipped with styles)

top ↑Usage Basics

Usage of this widget is very simple, just include one of the files above onto your page and then either use RightJS standard auto-initialization feature, like that

<input type="text" value="one, two, three" data-tags="{}" />

Or, initialize a tags widget over a normal input field programmatically

<input type="text" value="one, two, three" id="my-tags-field" />

var tags = new Tags('my-tags-field', {
// options in here

If you need the autocompletion feature, just specify the list of known tags in the standard options

<input type="text" data-tags="{tags: ['one', 'two', 'three']}" />

Or even without options, just with a plain list

<input type="text" data-tags="['one', 'two', 'three']" />

All the tags found in the value attribute will be automatically added to the list.

top ↑Options List

You can use the following list of options with this widget

tags[]the tags list
verticalfalseuse a vertical tags list
allowNewtrueallow new tags to be created
nocasetruecase insensitive mode
autocompletetrueautocomplete the user’s input
separator’,’the tokens separator

You can specify those options either with the data-tags attribute or with the Tags class constructor, or change them globally in the Tags.Options object

top ↑Events List

In additional to the standard Input class events, the Tags class also supports the following events

addwhen a new tag was added
removewhen a tag was removed

Both those events will have an additional attribute called tag, which will contain the tag text

top ↑Style Alterations

The Tags widget has a pretty simple HTML construction

<input type="text" class="rui-tags" />
<div class="rui-tags">
<ul class="list">
<li><div class="text">Tag 1</div><div class="close">&times;</div></li>
<li><div class="text">Tag 2</div><div class="close">&times;</div></li>
<li><div class="text">Tag 3</div><div class="close">&times;</div></li>

<input type="text" />

<ul class="rui-dd-menu">
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>

Feel free to alter it as you need.