# Grouping Controls

Groups allow you to organise similar settings into relevant sections in the inspector.

{% hint style="info" %}
The **icon** property uses SF Symbols. Please refer to the [SF Symbol app](https://developer.apple.com/sf-symbols/) for a list of available icons.
{% endhint %}

Here is an example empty group:

```json
{
  "groups": [
    {
      "title": "Color Settings",
      "icon": "paintpalette",
      "properties": []
    }
  ]
}
```

### Group Icon

You can specify an icon to appear next to the title of your group. The **Icon** property uses SF Symbols. Please refer to the [SF Symbol app](https://developer.apple.com/sf-symbols/) for a list of available icons.

### Group Controls

Controls should be placed inside the properties array. The following example has a heading, a text field, and an image dropwell inside the group.

```json
{
  "groups": [
    {
      "title": "Hero Content",
      "icon": "textformat.size",
      "properties": [
        {
          "title": "Headline",
          "id": "heroHeadline",
          "text": {
            "default": "Launch your next product"
          }
        },
        {
          "title": "Subheading",
          "id": "heroSubheading",
          "textArea": {
            "default": "A short sentence explaining the value proposition."
          }
        },
        {
          "title": "Background Image",
          "id": "heroImage",
          "image": {}
        }
      ]
    }
  ]
}
```

The following example has two groups, one for content and one for media.

```json
{
  "groups": [{
    "title": "Content",
    "icon": "textformat",
    "properties": [{
      "title": "Title",
      "id": "cardTitle",
      "text": {
        "default": "Customer Story"
      }
    }]
  }, {
    "title": "Media",
    "icon": "photo",
    "properties": [{
      "title": "Image",
      "id": "cardImage",
      "image": {}
    }]
  }]
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements-language/component/properties-json/grouping-controls.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.