PHPackages                             heimrichhannot/contao-tagsinput - 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. [Utility & Helpers](/categories/utility)
4. /
5. heimrichhannot/contao-tagsinput

ActiveContao-bundle[Utility & Helpers](/categories/utility)

heimrichhannot/contao-tagsinput
===============================

Contao port of Bootstrap Tags Input that provides an front and back end field to add custom values like tags to an field or database table.

3.0.2(5mo ago)09.5k↓50%[9 PRs](https://github.com/heimrichhannot/contao-tagsinput/pulls)8LGPL-3.0-or-laterPHPPHP ^7.4 || ^8.0CI passing

Since Aug 26Pushed 1mo ago8 watchersCompare

[ Source](https://github.com/heimrichhannot/contao-tagsinput)[ Packagist](https://packagist.org/packages/heimrichhannot/contao-tagsinput)[ Docs](https://github.com/heimrichhannot/contao-tagsinput)[ RSS](/packages/heimrichhannot-contao-tagsinput/feed)WikiDiscussions v3 Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (68)Used By (8)

Contao Tags Input
=================

[](#contao-tags-input)

Contao port of [Bootstrap Tags Input](http://timschlechter.github.io/bootstrap-tagsinput/examples/) that provides an front and back end field to add custom values like tags to an field or database table.

Features
--------

[](#features)

- Frontend and backend support (inputType : tagsinput)
- Free Input can be set to true or false on dca field config.
- [typeahead.js](http://twitter.github.io/typeahead.js/) support
- styled for front and back end
- fetch options asynchronously remote (optional)
- sort tags per drag & drop
- add new tags by the following actions: pressing tab/return/semicolon and comma or by leaving the field (as long as freeInput is enabled and a value was typed inside the field)

Setup / Examples
----------------

[](#setup--examples)

### 1. Tagsinput with options or options\_callback and one possible tag selection

[](#1-tagsinput-with-options-or-options_callback-and-one-possible-tag-selection)

```
'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "varchar(255) NOT NULL default ''",
    'options'   => array('boston', 'berlin', 'hamburg', 'london'),
    'eval'      => array
    (
        'freeInput'   => false
        'tl_class' => 'w50 autoheight'
    )
),

```

### 2. Tagsinput with options or options\_callback and multiple possible tag selection and freeInput

[](#2-tagsinput-with-options-or-options_callback-and-multiple-possible-tag-selection-and-freeinput)

```
'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "blob NULL",
    'options'   => array('boston', 'berlin', 'hamburg', 'london'),
    'eval'      => array
    (
        'multiple'        => true,
        'freeInput'       => true,
        'multiple'        => true,
        'maxTags'         => 3,
        'maxChars'        => 12,
        'trimValue'       => true,
        'allowDuplicates' => true,
        'tl_class' => 'w50 autoheight'
    )
),

```

### 3. Tagsinput with freeInput and one possible tag selection

[](#3-tagsinput-with-freeinput-and-one-possible-tag-selection)

```
'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "varchar(255) NOT NULL default ''",
    'eval'      => array
    (
        'freeInput'   => true,
        'tl_class' => 'w50 autoheight'
    )
),

```

### 4. Tagsinput with freeInput and multiple possible tag selection

[](#4-tagsinput-with-freeinput-and-multiple-possible-tag-selection)

```
'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "blob NULL",
    'eval'      => array
    (
        'multiple'    => true,
        'freeInput'   => true,
        'tl_class' => 'w50 autoheight'
    )
),

```

### 5. Tagsinput with remote options and one possible tag selection

[](#5-tagsinput-with-remote-options-and-one-possible-tag-selection)

```
'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "int(10) unsigned NOT NULL default '0'",
    'eval'      => array(
        'placeholder' => &$GLOBALS['TL_LANG']['tl_member']['placeholders']['locations'],
        'freeInput'   => false,
        'mode'        => \TagsInput::MODE_REMOTE,
        'remote'      => array
        (
            'fields'       => array('title', 'id'),
            'format'       => '%s [ID:%s]',
            'queryField'   => 'title',
            'queryPattern' => '%QUERY%',
            'foreignKey'   => '%parentTable%.id',
            'limit'        => 10
        ),
        'tl_class' => 'w50 autoheight'
    )
),

```

As you can see, there must be a remote configuration, with the tags format and fields, taken from the `foreignKey` relation. The `foreignKey` must be a valid database table reference, by a given table name and field. It is also possible to reference the table name from a field within the current record, by adding percent sign before and behind the field name. This might be helpful for dynamic tagsinput fields. The `queryField` represents the lookup field for the given typeahead query. To provide a custom query pattern for the LIKE search, simply add a custom `queryPattern` and place percent sign where you want;

### 5. Tagsinput with remote options from relation table and multiple possible tag selections and freeInputs

[](#5-tagsinput-with-remote-options-from-relation-table-and-multiple-possible-tag-selections-and-freeinputs)

```
'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "blob NULL",
    'eval'      => array(
        'placeholder' => &$GLOBALS['TL_LANG']['tl_member']['placeholders']['locations'],
        'freeInput'   => true,
        'mode'        => \TagsInput::MODE_REMOTE,
        'remote'      => array
        (
            'fields'       => array('title', 'id'),
            'format'       => '%s [ID:%s]',
            'queryField'   => 'title',
            'queryPattern' => '%QUERY%',
            'foreignKey'   => '%parentTable%.id',
            'limit'        => 10
        ),
        'save_tags' => array(
            'table'    => 'tl_calendar_events',
            'tagField' => 'title',
            'defaults' => array
            (
                'tstamp'    => time(),
                'pid'       => 1,
                'type'      => 'community',
                'published' => false
            )
        ),
        'tl_class' => 'w50 autoheight'
    )
),

```

If you want to add tags as entities within remote mode, you have to enable freeInput and provide a valid save\_tags configuration like the one provided above. The `tagField` should be the field from the `save_tags` table where the user input from tagsinput should be stored in.

### 6. Tagsinput with remote options from options or options\_callback and multiple possible tag selections and freeInputs and tags\_callback

[](#6-tagsinput-with-remote-options-from-options-or-options_callback-and-multiple-possible-tag-selections-and-freeinputs-and-tags_callback)

```
'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'options'   => array('boston', 'berlin', 'hamburg', 'london'),
    'sql'       => "blob NULL",
    'eval'      => array(
        'placeholder' => &$GLOBALS['TL_LANG']['tl_member']['placeholders']['locations'],
        'freeInput'   => true,
        'mode'        => \TagsInput::MODE_REMOTE,
        'remote'      => array
        (
            'queryPattern' => '%QUERY%',
            'limit'        => 10
        ),
        'tags_callback' => array(array('MyClass', 'addTagAttributes')),
        'tl_class' => 'w50 autoheight'
    ),
),

```

### eval options

[](#eval-options)

OptionDefaultDescriptionMandatoryfreeInputtrueEnable or disable, the possibility to add custom tags.falsemultipletrueEnable multiple input tags, disable for single tags.falsemaxTagsundefinedWhen set and multiple, 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.falsemaxCharsundefinedDefines the maximum length of a single tag.falsetrimValuefalseWhen true, automatically removes all whitespace around tags.allowDuplicatesfalseWhen true, the same tag can be added multiple times.falsehighlighttrueSet to false if the typeahead dropdown should not be shown on focus, without input.falsehighlightOptionsFirst 5 optionsEnter the array that returns highlight option, when focus input without typing someting in input.falsehighlightOptionsCallbackFirst 5 optionsEnter a valid callback, that returns all highlighted options as array, when focus input without typing someting in input.falselimit5Limit the options when typed somethin in the input.falseshowTagListfalseDisplays a tag list with all available options (local only atm)falsetagListWeightClassCount6Specifies how many css classes are used for weighting (predefined styles are available for count up to 10)falseoption\_weightsnullExpects a callable function returning an array where keys are tag values and values are counts or this array itselffalseoption\_weights\_callbacknullExpects an array like \['MyClass', 'getWeights'\] referencing a function returning an array where keys are tag values and values are counts or this array itselffalse### save\_tags settings

[](#save_tags-settings)

OptionDefaultDescriptionMandatorytableMust contain the table name, where new tags should be stored at.truetagFieldThe name of the database field, that contains the label of the tag.truedefaultsAn array of default values, that should be set for new database tag entries.depends on your table config### remote settings

[](#remote-settings)

OptionDefaultDescriptionMandatoryfields-Must contain the table name, where new tags should be stored at.Only when foreignKey is provided.format-The name of the database field, that contains the label of the tag.Only when foreignKey is provided.queryField-An array of default values, that should be set for new database tag entries.Only when foreignKey is provided.queryPattern'%QUERY%'Enable or disable, the possibility to add custom tags.trueforeignKey-Enable or disable, the possibility to add custom tags.falselimit10Enable or disable, the possibility to add custom tags.false### tags\_callback

[](#tags_callback)

The tags\_callback should be a valid callback that can be used to manipulate the tag object.

```
// tags_callback example callback
class tl_member_custom extends \Backend
{
    public function addTagAttributes($arrOption, DataContainer $dc)
    {
        $objTag = MyTagsModel::findByPk($arrOption['value']);

        if (!$objTag->published)
        {
            $arrOption['class'] .= ' new';
        }

        return $arrOption;
    }
}

```

###  Health Score

55

—

FairBetter than 98% of packages

Maintenance81

Actively maintained with recent releases

Popularity23

Limited adoption so far

Community21

Small or concentrated contributor base

Maturity83

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 80% 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.

###  Release Activity

Cadence

Every ~65 days

Recently: every ~146 days

Total

58

Last Release

175d ago

Major Versions

1.0.10 → 2.0.02016-06-29

v2.x-dev → 3.0.0-beta02024-02-15

PHP version history (4 changes)2.1.1PHP ~5.4 || ~7.0

2.3.0PHP ~5.4 || ~7.0 || ^8.0

2.4.0PHP ~7.0 || ^8.0

3.0.0-beta0PHP ^7.4 || ^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/28ad3224d8727b622ebd229840eea6b9dbcb83eb0bd609e6ce65b614830ff538?d=identicon)[digitales@heimrich-hannot.de](/maintainers/digitales@heimrich-hannot.de)

---

Top Contributors

[![ericges](https://avatars.githubusercontent.com/u/25957923?v=4)](https://github.com/ericges "ericges (24 commits)")[![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (5 commits)")[![nafetagrats](https://avatars.githubusercontent.com/u/5796948?v=4)](https://github.com/nafetagrats "nafetagrats (1 commits)")

---

Tags

contaowidgettagsinputtagsinput

### Embed Badge

![Health badge](/badges/heimrichhannot-contao-tagsinput/health.svg)

```
[![Health](https://phpackages.com/badges/heimrichhannot-contao-tagsinput/health.svg)](https://phpackages.com/packages/heimrichhannot-contao-tagsinput)
```

###  Alternatives

[codefog/contao-haste

haste extension for Contao Open Source CMS

42650.8k139](/packages/codefog-contao-haste)[mvo/contao-group-widget

Adds a new group widget that allows repeating a set of DCA fields.

28124.3k31](/packages/mvo-contao-group-widget)[codefog/contao-news_categories

News Categories bundle for Contao Open Source CMS

3183.3k6](/packages/codefog-contao-news-categories)

PHPackages © 2026

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