> From the [Strife developer docs](https://strife.app/docs/reference/fields/tab-group). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Tab Group

Tab Groups provide a clean and organized way to group fields within the editor interface.

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**.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="182">Option</th><th>Description</th></tr></thead><tbody><tr><td>Tabs</td><td>Defines the collection of tabs within the group. Each tab entry contains a <strong>name</strong> (displayed in the editor UI) and a <strong>value</strong> (used internally to map fields to a specific tab).</td></tr></tbody></table>

### 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.

```json
{
  ...
  "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"`.

> [!NOTE]
> Note: The prefix must exactly match the `propertyName` defined in the Tab Group's configuration.

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

```json
{
    ...
    "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

> [!NOTE]
> Tab Groups are **UI-only elements** and have **no effect on Live Preview output**.