Tokenfield for Bootstrap
Advanced tagging/tokenizing pluginBasic usage
Advanced examples
Input sizing
Input group sizing
Validation states
Custom colors
Bootstrap Tags Input
User interface for managing tagsInitialization
Default usage
Tags input is a simple and flexible extension with plenty of useful features and support of Twitter Typeahead library. To initialize tags input, you can use both javascript and data attributes.
"Amsterdam,Washington,Sydney,Beijing"["Amsterdam","Washington","Sydney","Beijing"]Using data attributes
Just add data-role="tagsinput" to your input field to automatically change it to a tags input field. Note: currently tags input supports only default options if intinalized via data attributes.
Basic options
Maximum tags allowed
When set, no more than the given number of tags are allowed to add (default: undefined). When maxTags is reached, a class 'bootstrap-tagsinput-max' is placed on the tagsinput element.
"Amsterdam,Washington,Sydney"["Amsterdam","Washington","Sydney"]Custom tags class
Tag element uses basic .badge element markup and supports all color options available for it. Default color alternative is info, to use another color add proper class to tagClass option.
"Amsterdam,Washington,Sydney"["Amsterdam","Washington","Sydney"]