Tab Group

They are purely a visual grouping mechanism and do not affect your content model structure — meaning they do not introduce nested properties in your JSON data.

Settings

The Tab Group field includes one specific configuration option in addition to the basic settings.

Define with JSON

When defining templates using JSON, this field is represented using:

• Component Name: str-tab-group
• Type: str-tab-group
• Reference ID: str-tab-group

The settings above map into the editor.options object inside the JSON definition.

{
  ...
  "editor": {
    "name": "str-tab-group",
    "type": "str-tab-group",
    "propertyName": "...",
    "options": {
        "tabs": [
            {
                "name": "...", //The name displayed to the editor
                "value": "..." //Value used as id
            },
            ...
        ]
    }
  },
  ...
}

In this example, two tabs are defined — Properties and SEO — which organize fields into separate visual sections within the editor.

How to add a field to a tab group

To place a field inside a specific tab within a Tab Group, reference the tab using the format {propertyName}-{value}, where:

• {propertyName} is the Tab Group's propertyName field
• {value} is the specific tab's value property

Example: If your Tab Group has propertyName: "tabs" and a tab with value: "properties", the reference would be "tabs-properties".

If your Tab Group has propertyName: "tabGroup" and a tab with value: "content", the reference would be "tabGroup-content".

This link is made using the tabGroup attribute inside the field’s editor.attributes object.

{
    ...
    "editor": {
        ...
        "attributes": {
            "tabGroup": [
                "tabs-properties"
            ]
        }
    },
    ...
},

In this example, this field will appear under the Properties tab of the defined Tab Group.

Note:
The prefix tabs- must match the value defined in the Tab Group’s configuration.
For instance, if a tab has "value": "seo", the corresponding field should use "tabs-seo".

Live preview