Tagify: Tag inputs that speak wire:model
Livewire Tagify turns an <input> or <textarea> in a Livewire component into a Tagify field bound to a property in both directions. Tags, a single choice from a list, or text with mentions all stay in sync with the component without custom JavaScript.
Everything a tag input needs inside Livewire
One attribute on the field, one directive in the layout.
Two-way binding
Added and removed tags reach the property, and server-side changes reach the field, with no echo requests.
Plain values or tag objects
Bind ["php","laravel"] with data-direct, or keep Tagify's tag objects and their extra fields.
Tags, select, and mix modes
Many tags, one choice from a list, or text with mentions, each with its own bound value.
Suggestions in one attribute
data-suggest-list, data-suggest-enforce, data-black-list, data-max, and data-delimiters.
Right component, always
Each field binds to the component around it; data-component-id is optional.
No Node build
Loads with @livewireTagifyScripts, or as an ES module for Vite and other bundlers.
A quick look
Mark the field and bind it; the tags follow the property both ways.
1<div wire:ignore>2 <input data-pharaonic="tagify" wire:model="skills"3 data-direct data-suggest4 data-suggest-list='@json($allSkills)'>5</div>6 7{{-- $skills = ['php', 'laravel'] --}}Tagify Questions
Quick answers about installing and using Tagify.
What is Tagify?
Tagify for Livewire components, with two-way wire:model binding for tags, select, and mix modes, suggestion lists, and automatic cleanup. It's a free, open-source Livewire package by Pharaonic.
How do I install Tagify?
Run composer require pharaonic/livewire-tagify in your project's root directory, then add @livewireTagifyScripts to your layout.
What does Tagify require?
The latest release requires PHP 8.0+, Laravel 7 – 10 and Livewire 2. Tagify is loaded by your application.
Which Livewire versions are supported?
Every Livewire major has its own line, and Composer installs the one that matches your Livewire version. See the compatibility section of the documentation.
Does my property hold strings or objects?
By default it holds Tagify's tag objects, such as [{"value":"php"}]. Add data-direct and it holds plain values, such as ["php"].
Can I use mentions or a single choice?
Yes. Set Tagify's mode to mix for text with tags, or to select for one value, in data-options.
Does it work with Vite?
Yes. Import Tagify from npm and set window.Tagify, or import the package's ES module.
Is Tagify free to use?
Yes. Tagify is open source under the MIT license, so you can use it in personal and commercial projects.
Where can I find the Tagify documentation?
Read the Tagify documentation for setup, binding, modes, options, and examples.
How do I report a bug or contribute to Tagify?
Open an issue or a pull request on GitHub, or ask in the Pharaonic Discord.
Ready to dig in?
Read the full documentation for installation, binding and value shapes, shorthand attributes and Tagify settings, select and mix modes, dynamic fields, upgrading from 1.2, and examples.