Skip to main content

TagGroup (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The TagGroup widget shows a row of tags. The tags are for display only. Users cannot select, remove, or click them, and the widget has no events. Use it to show statuses, categories, or skills. If users need to act on the tags, use the Chip Group widget.

Widget type: WDS_TAG_GROUP_WIDGET

TagGroup widget in a Responsive app
TagGroup widget

Content properties​

These properties appear in the Content tab of the property pane.

Appearance​

Alignment string​

Sets the horizontal alignment of the tags. Options: left (default), center.

Values for code: start, center.

Chip background string​

Sets a custom background for the tags. Use a CSS color, for example #def7ec or rgba(255,255,255,0.25).

When you set Chip background or Chip text color, the widget draws the tags as plain pills with your colors instead of the theme style.

Chip text color string​

Sets a custom text color for the tags. When you set it, the widget draws the tags as plain pills with your colors instead of the theme style.

Data​

Options array​

Sets the tags to show, as an array of objects with a label and a value. The widget shows the label.

Example:

[
  { "label": "Active", "value": "active" },
  { "label": "Pending", "value": "pending" },
  { "label": "Archived", "value": "archived" }
]

The array must follow these rules, or the property pane shows an error:

  • Each item needs a label.
  • Each value must be unique.
  • All value fields must have the same type, either all strings or all numbers.

You can bind data to it, for example {{GetTags.data.map(t => ({ label: t.name, value: t.id }))}}.

General​

Visible boolean​

Controls whether the widget is visible. Default: on.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{TagGroup1.isVisible}}. You cannot set them directly.

options array​

The array of tags the widget shows.

Example:

{{TagGroup1.options}}

value array​

The same value as options.

Example:

{{TagGroup1.value}}

isVisible boolean​

Shows whether the widget is visible.

Example:

{{TagGroup1.isVisible}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

TagGroup1.setVisibility(false)

setOptions (param: array): Promise​

Sets the tags the widget shows.

Example:

TagGroup1.setOptions([{ label: "Urgent", value: "urgent" }])