{
  "settings": {
    "title": "My Plugin Title",
    "description": "Plugin description here",
    "api_key": "abc123xyz",
    "timeout": "10",
    "webhook_url": "https://example.com/webhook"
  }
}
The group component provides a collapsible organizational structure for grouping related plugin settings together. It creates an expandable/collapsible section with a clear label and optional help text, making it easy for app developers to manage complex plugin configurations by organizing them into logical groups. The component allows for better user experience when dealing with plugins that have many settings. example group setting

​
Compatibility

Plugin typeAvailabilityAdditional notes
Content blocks
Media sourceAvailable as part of the preset search functionality. Check media source documentation for more details.

​
Properties

​
type
string
required
group - the type of the component
​
label
string
required
Creator-facing identifier that is shown as the group header in the plugin environment
​
settings
array
required
Array of child setting objects that will be displayed within the collapsed group. Each setting should be a valid plugin setting component.
​
help
string
Brief creator-facing explanation that clarifies the group’s purpose and usage, displayed as a tooltip next to the group label
​
dependencies
object array
Allows for the group to be shown conditionally, dependent on other fields. See dependencies page for more details.

​
Testing Examples

​
Simple Group (Copy & Paste Ready)

{
  "type": "group",
  "label": "Basic Settings",
  "settings": [
    {
      "type": "text",
      "name": "title",
      "label": "Title"
    },
    {
      "type": "text",
      "name": "description",
      "label": "Description"
    }
  ]
}

​
Group with Help Text

{
  "type": "group",
  "label": "Advanced Settings",
  "help": "Configure advanced options here",
  "settings": [
    {
      "type": "text",
      "name": "api_key",
      "label": "API Key",
      "placeholder": "Enter your API key"
    },
    {
      "type": "select",
      "name": "timeout",
      "label": "Timeout",
      "options": [
        { "label": "5 seconds", "value": "5" },
        { "label": "10 seconds", "value": "10" }
      ]
    }
  ]
}

​
Group with Dependencies

{
  "type": "group",
  "label": "Optional Features",
  "settings": [
    {
      "type": "text",
      "name": "webhook_url",
      "label": "Webhook URL"
    }
  ],
  "dependencies": [
    {
      "field": "enable_webhooks",
      "value": "true"
    }
  ]
}

{
  "settings": {
    "title": "My Plugin Title",
    "description": "Plugin description here",
    "api_key": "abc123xyz",
    "timeout": "10",
    "webhook_url": "https://example.com/webhook"
  }
}