How it works
Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and small code footprint, exploded with features. Tagify
Basic example
Passing the input element as a parameter to Tagify will transform it into a tags-component. Without any settings, the user will be allowed to create any tags they want, without a count limit.
Same using custom suggestions:
The suggestions are styled as tags this time. Clicking on a suggested it, it will be added to Tagify
Textarea
In this example, the field is pre-ocupied with 3 tags, and last tag is not included in the whitelist, and will be removed because the enforceWhitelist setting flag is set to true
Easy to customize
The easiest way to customize styles (colors, borders, spacing, radii, etc.) is by using CSS variables.
Users list
This example shows how to customize Tagify further. It also includes an Add All option as the first item in the suggestions dropdown list.
Advance options
In this example, the dropdown.enabled setting is set (minimum charactes typed to show the dropdown) to 3. Maximum number of tags is set to 6
Tags with properties (countries)
Some cases requires more control per-tag, for exmaple, sending a different value to the server than the textual value the user sees/entered. Another example, would be different colors for different tags or tags' groups. it's possible to add any number of properties per tag, the only constant is the value property which must be declared per-tag, and that will be the rendered text.