Tokenfield

Limited Tokens

Simple example with color names:

In this example you can select up to 11 colors from the list: red, orange, yellow, green, blue, indigo, violet, black, white, brown, pink. You can't add your own colors.

Result you'll get on form submit:

Change input above to see the result.

How to Create:

new Tokenfield({
  el: document.querySelector('.text-input'), // Attach Tokenfield to the input element with class "text-input"
  items: [
    {id: 1, name: 'red'},
    {id: 2, name:'orange'},
    {id: 3, name: 'yellow'},
    {id: 4, name: 'green'},
    {id: 5, name:'blue'},
    {id: 6, name: 'indigo'},
    {id: 7, name: 'violet'},
    {id: 8, name: 'black'},
    {id: 9, name: 'white'},
    {id: 10, name: 'brown'},
    {id: 11, name: 'pink'}
  ],
  newItems: false
});

New Tokens

Simple example with color names and ability to add your own colors:

In this example you can select one of the predefined colors - red, blue or yellow or add any new text yourself.

Remove Item
Result you'll get on form submit:

Change input above to see the result.

How to Create:

new Tokenfield({
  el: document.querySelector('.text-input'), // Attach Tokenfield to the input element with class "text-input"
  items: [{id: 1, name: 'red'}, {id: 2, name:'blue'}, {id: 3, name: 'yellow'}]
});

Single Token

Allows you to add only one token, either custom or one of the available colors:

Result you'll get on form submit:

Change input above to see the result.

Remote Autocomplete

Fetches remote data for autocomplete:

Result you'll get on form submit:

Change input above to see the result.

Remote Autocomplete with data remapping

Fetches remote data for autocomplete and renders labels in capital letters

Result you'll get on form submit:

Change input above to see the result.

How to Create:

var tokenfield = new Tokenfield({
  el: document.querySelector('.text-input'), // Attach Tokenfield to the input element with class "text-input"
  newItems: false
});

// Overrride helper method responsible for rendering label.
tokenfield.renderSetItemLabel = function(item) {
  return item.name.toUpperCase();
}