PHPackages                             ingenious/bootstrap-tokenfield - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. ingenious/bootstrap-tokenfield

ActiveComponent

ingenious/bootstrap-tokenfield
==============================

Composer fork of sliptree/bootstrap-tokenfield

0677JavaScript

Since Oct 19Pushed 10y ago1 watchersCompare

[ Source](https://github.com/Gimcrack/bootstrap-tokenfield)[ Packagist](https://packagist.org/packages/ingenious/bootstrap-tokenfield)[ RSS](/packages/ingenious-bootstrap-tokenfield/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Bootstrap Tokenfield
====================

[](#bootstrap-tokenfield)

[!\[NPM version\]\[npm-badge\]](http://badge.fury.io/js/bootstrap-tokenfield)[!\[Build status\]\[travis-badge\]](https://travis-ci.org/sliptree/bootstrap-tokenfield)\[npm-badge\]: \[travis-badge\]:

A jQuery tagging / tokenizer input plugin for Twitter's Bootstrap, by the guys from [Sliptree](https://sliptree.com)

Check out the [demo and docs](http://sliptree.github.io/bootstrap-tokenfield/)

### Installation

[](#installation)

Requirements: jQuery 1.9+, Bootstrap 3+ (only CSS)

1. Install via npm or bower (recommended) or manually download the package
2. Include `dist/bootstrap-tokenfield.js` or `dist/bootstrap-tokenfield.min.js` in your HTML
3. Include `dist/css/bootstrap-tokenfield.css` in your HTML

### Usage

[](#usage)

```
$('input').tokenfield()
```

### Features

[](#features)

- Copy & paste tokens with Ctrl+C and Ctrl+V
- Keyboard navigation, delete tokens with keyboard (arrow keys, Shift + arrow keys)
- Select specific tokens with Ctrl + click and Shift + click
- Twitter Typeahead and jQuery UI Autocomplete support

### FAQ

[](#faq)

#### How can I prevent duplicate tokens from being entered?

[](#how-can-i-prevent-duplicate-tokens-from-being-entered)

You can use the `tokenfield:createtoken` event for that. Check the `event.attrs` property for token value and label, and the run your duplicate detection logic. If it's a duplicate token, simply do `event.preventDefault()`.

Here's a simple example that checks if token's value is equal to any of the existing tokens' values.

```
$('#my-tokenfield').on('tokenfield:createtoken', function (event) {
	var existingTokens = $(this).tokenfield('getTokens');
	$.each(existingTokens, function(index, token) {
		if (token.value === event.attrs.value)
			event.preventDefault();
	});
});
```

#### And how about limiting tokens to my typeahead/autocomplete data?

[](#and-how-about-limiting-tokens-to-my-typeaheadautocomplete-data)

Similarly, using `tokenfield:createtoken`, you can check to see if a token exists in your autocomplete/typeahead data. This example checks if the given token already exists and stops its entry if it doesn't.

```
$('#my-tokenfield').on('tokenfield:createtoken', function (event) {
	var available_tokens = bloodhound_tokens.index.datums
	var exists = true;
	$.each(available_tokens, function(index, token) {
		if (token.value === event.attrs.value)
			exists = false;
	});
	if(exists === true)
		event.preventDefault();
})
```

### Changelog

[](#changelog)

See [release notes](https://github.com/sliptree/bootstrap-tokenfield/releases)

Previous releases:

0.10.0

- Fixed: Entering a duplicate token does not submit the underlying form anymore
- Fixed: Selecting a duplicate token from autocomplete or typeahead suggestions no longer clears the input
- Improved: Trying to enter a duplicate tag now animates the existing tag for a little while
- Improved: Tokenfield input has now `autocomplete="off"` to prevent browser-specific autocomplete suggestions
- Changed: `triggerKeys` has been renamed to `delimiter` and accepts a single or an array of characters instead of character codes.

0.9.9-1

- Fixed: setTokens now respects `triggerKeys` option

0.9.8

- New: `triggerKeys` option
- Fixed: Long placeholders are not being cut off anymore when initializing tokenfield with no tokens #37
- Fixed: createTokensOnBlur no more breaks token editing #35

0.9.7 Valuable

- Fixed: Twitter Typeahead valueKey support #18
- Fixed: Removing multiple tokens returned wrong data #30
- Fixed: If token is removed in beforeEdit event, no longer falls over #27, #28
- Fixed: Change event was triggered on initialization #22
- Fixed: When token is removed in tokenfield:preparetoken event, no longer tries to create a token
- Fixed: Pressing comma key was not handled reliably
- New: `prevetDuplicateToken` event
- Improved: Typeahead integration
- Improved: styling
- Minor tweaks, fixes, improvements

0.9.5 Typeable

- New: Twitter Typeahead support
- New: When triggering 'change' event on original input, setTokens is now called. This allows you to update tokens externally.
- Fixed: Nnput labels did not work with tokenfield
- Fixed: Set correct input width on fixed-width inputs

0.9.2 Maintenance release

- Many small fixes and improvements

0.9.0 Bootstrappable

- New: Bootstrap 3 support
- New: Input group support
- New: Disable/enable tokenfield
- New: Tokenfield is now responsive
- Deprecated: Bootstrap 2 support

0.7.1

- Fixed: pressing comma did not create a token in Firefox
- Fixed: tokenfield('getTokensList') returned array instead of string

0.7.0 Autocompleted

- New feature: jQuery UI Autocomplete support

0.6.7 Crossable

- Fixed: Firefox close icon was misplaced
- New: IE 8-10 support (both CSS and Javascript)

0.6.5 Shiftable

- New feature: select specific tokens with Ctrl/Shift + click
- New feature: select specific tokens with Shift + arrow keys
- Internal API improvements

0.6 Editable

- New feature: Edit existing tokens by double-clicking or pressing enter
- A lot of improvements and bugfixes

0.5 Initial release

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community19

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 85.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/49f8c400b0768dacb071aca3ca234b111e3feba19574ed608d3a96114054f120?d=identicon)[ingenious](/maintainers/ingenious)

---

Top Contributors

[![ragulka](https://avatars.githubusercontent.com/u/593267?v=4)](https://github.com/ragulka "ragulka (225 commits)")[![tmorehouse](https://avatars.githubusercontent.com/u/2781561?v=4)](https://github.com/tmorehouse "tmorehouse (7 commits)")[![asacarter](https://avatars.githubusercontent.com/u/802246?v=4)](https://github.com/asacarter "asacarter (3 commits)")[![paxswill](https://avatars.githubusercontent.com/u/178273?v=4)](https://github.com/paxswill "paxswill (3 commits)")[![powerman](https://avatars.githubusercontent.com/u/1354301?v=4)](https://github.com/powerman "powerman (3 commits)")[![olegus8](https://avatars.githubusercontent.com/u/5133235?v=4)](https://github.com/olegus8 "olegus8 (2 commits)")[![maduhaime](https://avatars.githubusercontent.com/u/58376?v=4)](https://github.com/maduhaime "maduhaime (2 commits)")[![jonathanza](https://avatars.githubusercontent.com/u/1636228?v=4)](https://github.com/jonathanza "jonathanza (2 commits)")[![igaponov](https://avatars.githubusercontent.com/u/4271889?v=4)](https://github.com/igaponov "igaponov (1 commits)")[![kamilgrzegorczyk](https://avatars.githubusercontent.com/u/665560?v=4)](https://github.com/kamilgrzegorczyk "kamilgrzegorczyk (1 commits)")[![MattyBearBytes](https://avatars.githubusercontent.com/u/2068407?v=4)](https://github.com/MattyBearBytes "MattyBearBytes (1 commits)")[![msb-jeremy](https://avatars.githubusercontent.com/u/18389776?v=4)](https://github.com/msb-jeremy "msb-jeremy (1 commits)")[![rcwsr](https://avatars.githubusercontent.com/u/1541207?v=4)](https://github.com/rcwsr "rcwsr (1 commits)")[![taivo](https://avatars.githubusercontent.com/u/1006076?v=4)](https://github.com/taivo "taivo (1 commits)")[![varunkumar](https://avatars.githubusercontent.com/u/509433?v=4)](https://github.com/varunkumar "varunkumar (1 commits)")[![Aries-UA](https://avatars.githubusercontent.com/u/1522915?v=4)](https://github.com/Aries-UA "Aries-UA (1 commits)")[![xificurk](https://avatars.githubusercontent.com/u/117465?v=4)](https://github.com/xificurk "xificurk (1 commits)")[![brauliobo](https://avatars.githubusercontent.com/u/41740?v=4)](https://github.com/brauliobo "brauliobo (1 commits)")[![breakoutbox](https://avatars.githubusercontent.com/u/994834?v=4)](https://github.com/breakoutbox "breakoutbox (1 commits)")[![dmitrygusev](https://avatars.githubusercontent.com/u/76579?v=4)](https://github.com/dmitrygusev "dmitrygusev (1 commits)")

### Embed Badge

![Health badge](/badges/ingenious-bootstrap-tokenfield/health.svg)

```
[![Health](https://phpackages.com/badges/ingenious-bootstrap-tokenfield/health.svg)](https://phpackages.com/packages/ingenious-bootstrap-tokenfield)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)