Tagify — Reference

Tagify

Tagify settings and events. Select the component in App Structure to find these controls in Properties.

Tagify Properties

Name	Description
ID	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. Default: "". Attribute: id.
Name	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. Default: "". Attribute: name.
Disabled	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 Default: false. Attribute: disabled.
Read Only	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 Default: false. Attribute: readonly.
Enable Drag Sort	Default: false.
Dropdown Position	Options: All, Text (text), Input (input) Default: "". Attribute: dropdown-position.
Mode	Options: Default, Mix (mix), Select (select) Default: "". Attribute: mode.

Data Properties

Name	Description
Data Source	Default: "". Attribute: dmx-bind:data.
Text Field	Default: "". Attribute: tag-text.
Secondary Field	Default: "". Attribute: tag-secondary.
Value Field	Default: "". Attribute: tag-value.
Image Field	Default: "". Attribute: tag-image.
Class Field	Default: "". Attribute: tag-class.
Count Field	Default: "". Attribute: tag-count.
Readonly Field	Default: "". Attribute: tag-readonly.

Display Options

Name	Description
Duplicates	Default: false. Attribute: duplicates.
No Trim	Default: false. Attribute: notrim.
No Autocomplete	Default: false. Attribute: noautocomplete.
Keep Invalid	Default: false. Attribute: keep-invalid.
Skip Invalid	Default: false. Attribute: skip-invalid.
Case Sensitive	Default: false. Attribute: case-sensitive.
No Close On Select	Default: false. Attribute: no-close-on-select.
No Fuzzy Search	Default: false. Attribute: no-fuzzy-search.
No Accented Search	Default: false. Attribute: no-accented-search.
Highlight First	Default: false. Attribute: highlight-first.
No Input	Default: false. Attribute: noinput.
No Custom	Default: false. Attribute: nocustom.
Delimiters	Default: ",". Attribute: delimiters.
Max Tags	Attribute: max-tags.
Min Chars	Default: "2". Attribute: min-chars.
Max Items	Default: "10". Attribute: max-items.
Pattern	Default: "". Attribute: pattern.

General Tags Styling

Name	Description
Disabled Bg	Default: "#f1f1f1".
Border Color	Default: "#3595f6".
Hover Border Color	Default: "#ccc".
Focus Border Color	Default: "#3595f6".

Tag Styling

Name	Description
Background	Default: "#e5e5e5".
Hover Color	Default: "#d3e2e2".
Text Color	Default: "#000000".
Text Color Edit	Default: "#000000".
Image Size	Default: "1em".
Pad	Default: ".3em .5em".
Min Width	Default: "1ch".
Max Width	Default: "auto".
Inset Shadow Size	Default: "1.1em".
Invalid Color	Default: "#d39494".
Invalid Bg	Default: "rgba(211, 148, 148, .5)".

Dropdown Styling

Name	Description
Text Color	Default: "".
Secondary Color	Default: "".
Secondary Font Size	Default: ".75em".
Count Color	Default: "".
Image Size	Default: "1em".
Gap Size	Default: ".3em".

Tag Remove Button Styling

Name	Description
Background Color	Default: "rgba(211, 148, 148, .3)".
Button Color	Default: "#bd5e5e".
Button Background	Default: "#ffffff".
Button Hover Bg	Default: "".

Input & Placeholder Styling

Name	Description
Input Color	Default: "".
Hide Transition	Default: ".3s".
Placeholder Color	Default: "rgba(0, 0, 0, .4)".
Placeholder Color Focus	Default: "rgba(0, 0, 0, .25)".
Loader Size	Default: ".8em".
Read Only Striped	Default: 1.

Add tags

Name	Description
Tags	Default: "".
Clear	Default: "".
Skip invalids	Default: "".

Remove tags

Name	Description
Tags	Default: "".

Dynamic attributes

Name	Description
No Custom	Choose dynamic data binding.
Delimiters	Choose dynamic data binding.
Duplicates	Choose dynamic data binding.
No Input	Choose dynamic data binding.
Max Tags	Choose dynamic data binding.
Loading	Choose dynamic data binding.
No Trim	Choose dynamic data binding.
No Autocomplete	Choose dynamic data binding.
Keep Invalid	Choose dynamic data binding.
Skip Invalid	Choose dynamic data binding.
Min Chars	Choose dynamic data binding.
Case Sensitive	Choose dynamic data binding.
Max Items	Choose dynamic data binding.
No Fuzzy Search	Choose dynamic data binding.
No Accented Search	Choose dynamic data binding.
Dropdown Position	Choose dynamic data binding.
Highlight First	Choose dynamic data binding.
Pattern	Choose dynamic data binding.

Dynamic events

Name	Description
Change	Action: Choose the action to execute.
Change: item	item is available in the event data payload.
Change: value	value is available in the event data payload.
Change: isCustom	isCustom is available in the event data payload.
Add	Action: Choose the action to execute.
Add: item	item is available in the event data payload.
Add: value	value is available in the event data payload.
Add: isCustom	isCustom is available in the event data payload.
Remove	Action: Choose the action to execute.
Remove: item	item is available in the event data payload.
Remove: value	value is available in the event data payload.
Remove: isCustom	isCustom is available in the event data payload.
Invalid	Action: Choose the action to execute.
Invalid: value	value is available in the event data payload.
Invalid: message	Popover content. Defines the main popover body content. You can enter static text or bind a value to show dynamic content (for example: details for a record or field). Bootstrap docs: Popovers
Input	Action: Choose the action to execute. Sets the control initial value. For App Connect, you often bind values reactively instead of hardcoding them. Bootstrap docs: Form control
Input: value	value is available in the event data payload.
Input: isValid	isValid is available in the event data payload.
Focus	Action: Choose the action to execute.
Blur	Action: Choose the action to execute.
Noresults	Action: Choose the action to execute.
Noresults: value	value is available in the event data payload.