Overview
Tagify is a wrapper around the Tagify library
that provides tag input functionality with Metronic styling.
Constructor
new Tagify(element, options)
| Parameter | Type | Description |
|---|---|---|
element |
string | HTMLInputElement | HTMLTextAreaElement |
CSS selector string or input/textarea element. |
options |
TagifyOptions |
Tagify configuration options. |
Custom Options
In addition to standard Tagify settings, the following custom options are available:
| Property | Type | Default | Description |
|---|---|---|---|
maxChars |
number |
- | Maximum character length of each tag. |
readonly |
boolean |
false |
If true, tags cannot be added or removed. |
Methods
| Method | Return | Description |
|---|---|---|
addTags(tags, clearInput?, skipInvalid?) |
HTMLElement[] |
Adds tags. Accepts a string, string array, or tag data array. |
removeAllTags() |
void |
Removes all tags. |
setReadonly(readonly?) |
void |
Toggles read-only mode. |
setDisabled(disabled?) |
void |
Toggles disabled mode. |
onAddTag(handler) |
Tagify |
Callback when a tag is added. |
onRemoveTag(handler) |
Tagify |
Callback when a tag is removed. |
onChangeTag(handler) |
Tagify |
Callback when tags change (add or remove). |
dispose() |
void |
Destroys the Tagify instance. |
Basic Example
Type a tag and press Enter to add it. Click the X on a tag to remove it.
<input id="tagsInput" type="text" class="form-control">
import {components} from 'metronic-extension';
const {Tagify} = components;
const tagify = new Tagify('#tagsInput', {
maxChars: 20,
});
tagify.addTags(['JavaScript', 'TypeScript']);
tagify.onChangeTag(event => {
console.log('Tags changed');
});
Whitelist Example
Tags are restricted to a whitelist. Click the input to see suggestions. Use the buttons to toggle read-only or clear all tags.
<input id="tagsInput" type="text" class="form-control">
import {components} from 'metronic-extension';
const {Tagify} = components;
const tagify = new Tagify('#tagsInput', {
whitelist: ['HTML', 'CSS', 'JavaScript', 'TypeScript', 'React', 'Vue', 'Angular', 'Svelte', 'Node.js', 'Python'],
enforceWhitelist: true,
maxTags: 5,
});
tagify.addTags(['React', 'TypeScript']);
// Toggle read-only
tagify.setReadonly(true); // enable
tagify.setReadonly(false); // disable
// Clear all
tagify.removeAllTags();