README

Multiselect tag input component for Nette Forms.

Lets users pick existing records from a datasource and optionally type new free-text tags. Works with Bootstrap 5, Tailwind CSS v3, or any custom theme. Supports AJAX search for large datasets.

Installation

composer require phloxcz/forms-taginput

Include the assets in your project:

// main.js
import 'vendor/phloxcz/forms-taginput/assets/taginput.js';

// main.scss
@use 'vendor/phloxcz/forms-taginput/assets/taginput.css';

Registration

In config.neon:

extensions:
    tagInput: Phlox\Forms\TagInput\TagInputExtension

Or manually in Bootstrap.php:

\Phlox\Forms\TagInput\TagInputExtension::register();

Quickstart

Local list (small datasets)

$form->addTagInput('tags', 'Tags:')
     ->setItems([1 => 'PHP', 2 => 'Nette', 3 => 'MySQL'])
     ->setTheme(TagInput::THEME_BOOTSTRAP);

AJAX search (large datasets)

// In your presenter:
$form->addTagInput('tags', 'Tags:')
     ->setSelection($this->tagRepository->findAll(), 'id', 'name')
     ->setSearchUrl($this->link('searchTag!'))
     ->setTheme(TagInput::THEME_BOOTSTRAP)
     ->setAllowNew(false);

// Signal handler:
public function handleSearchTag(string $q = ''): void
{
    $this->sendJson($this['myForm']['tags']->fetchData($q));
}

Reading submitted values

// Flat array — all values together
$tags = $form['tags']->getValue();
// e.g. [1, 3, "brand new tag"]

// Split by origin
$split = $form['tags']->getSplitValue();
foreach ($split['picked']  as $id)    { /* existing record ID */ }
foreach ($split['created'] as $label) { /* new free-text tag  */ }

Documentation

See docs/README.md for the full API reference.