Tagify: Reference

Transform your text input into a tags inputs in an easy, customizable way. The Tagify component transforms an input field into a Tags component, in an easy, customizable way, with great performance and many customizable options. Tagify provides auto suggestions when entering text into the input - really useful dynamic list of products, countries, options etc., so you can offer your users quick search and selection without having to enter long text.

Inspector Property Groups

Tagify Properties

Property	Type	Details
ID	text	Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Required in common setups. Attribute: id
Name	text	HTML name attribute. Sets the control name . This is used as the field key in form submissions and is essential for classic post submissions and many server-side handlers. Bootstrap docs: Forms overview Required in common setups. Attribute: name
Disabled	boolean	Disables the control. Disables the form control. Disabled controls cannot be focused or edited and may be excluded from submission depending on the browser/handler. Bootstrap docs: Disabled forms Attribute: disabled
Read Only	boolean	Read-only control. Makes the control read-only. Read-only controls can be focused and copied, but not edited. This is different from disabled. Bootstrap docs: Readonly Attribute: readonly
Enable Drag Sort	boolean
Dropdown Position	droplist	Attribute: dropdown-position Options: All, Text, Input

Data Properties

Property	Type	Details
Data Source	text	Attribute: dmx-bind:data Supports dynamic option sources.
Text Field	text	Attribute: tag-text Supports dynamic option sources.
Secondary Field	text	Attribute: tag-secondary Supports dynamic option sources.
Value Field	text	Attribute: tag-value Supports dynamic option sources.
Image Field	text	Attribute: tag-image Supports dynamic option sources.
Class Field	text	Attribute: tag-class Supports dynamic option sources.

Display Options

Property	Type	Details
Duplicates	boolean	Attribute: duplicates
No Trim	boolean	Attribute: notrim
No Autocomplete	boolean	Attribute: noautocomplete
Keep Invalid	boolean	Attribute: keep-invalid
Skip Invalid	boolean	Attribute: skip-invalid
Case Sensitive	boolean	Attribute: case-sensitive

General Tags Styling

Property	Type	Details
Disabled Bg	css_color
Border Color	css_color
Hover Border Color	css_color
Focus Border Color	css_color

Tag Styling

Property	Type	Details
Background	css_color
Hover Color	css_color
Text Color	css_color
Text Color Edit	css_color
Image Size	css_text
Pad	css_text

Dropdown Styling

Property	Type	Details
Text Color	css_color
Secondary Color	css_color
Secondary Font Size	css_text
Count Color	css_color
Image Size	css_text
Gap Size	css_text

Actions

Add empty tag

Tagify Add empty tag

Configuration group	Controls
Add empty tag Properties	Action configuration group

Add tags

Tagify Add tags

Configuration group	Controls
Add tags Properties	Tags, Clear, Skip invalids

Remove tags

Tagify Remove tags

Configuration group	Controls
Remove tags Properties	Tags

Remove all tags

Tagify Remove all tags

Configuration group	Controls
Remove all tags Properties	Action configuration group

Dynamic Attributes

No Custom

Attribute property	Type	Details
Value:	text	Choose dynamic data binding.

Delimiters

Attribute property	Type	Details
Value:	text	Choose dynamic data binding.

Duplicates

Attribute property	Type	Details
Value:	text	Choose dynamic data binding.

No Input

Attribute property	Type	Details
Value:	text	Choose dynamic data binding.

Max Tags

Attribute property	Type	Details
Value:	text	Choose dynamic data binding.

Dynamic Events

Change

Event option	Type	Details
Action:	text	Choose the action to execute.

Event Data

Field	Type	Details
item	text
value	text
isCustom	boolean

Add

Event option	Type	Details
Action:	text	Choose the action to execute.

Event Data

Field	Type	Details
item	text
value	text
isCustom	boolean

Remove

Event option	Type	Details
Action:	text	Choose the action to execute.

Event Data

Field	Type	Details
item	text
value	text
isCustom	boolean

Invalid

Event option	Type	Details
Action:	text	Choose the action to execute.

Event Data

Field	Type	Details
value	text
message	text	Popover content.

Input

Event option	Type	Details
Action:	text	Choose the action to execute.

Event Data

Field	Type	Details
value	text
isValid	boolean