<!-- HTML -->
<input name='basic' value='tag1, tag2 autofocus'>

<!-- JavaScript -->
<script >
	// The DOM element you wish to replace with Tagify
	var input = document.querySelector('input[name=basic]');

	// initialize Tagify on the above input node reference
	new Tagify(input)
</script>

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