Kit Developer Documentation

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.

Compatibility

Plugin type	Availability	Additional notes
Content blocks
Media source		Available as part of the preset `search` functionality. Check media source documentation for more details.

Properties

string

required

group - the type of the component

string

required

Creator-facing identifier that is shown as the group header in the plugin environment

array

required

Array of child setting objects that will be displayed within the collapsed group. Each setting should be a valid plugin setting component.

string

Brief creator-facing explanation that clarifies the group’s purpose and usage. (256 character limit. Supports markdown: [text](url), **bold**, and *italic*)

object array

Allows for the group to be shown conditionally, dependent on other fields. See dependencies page for more details.

Show properties

string

required

Name of the dependent field

string

Value for the dependent field required to show this group. To show when any value is inputted, leave out this property.

Testing Examples

Simple Group (Copy & Paste Ready)

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

Group with Help Text

{
  "type": "group",
  "label": "Advanced Settings",
  "name": "basic_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",
  "name": "basic_settings",
  "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"
  }
}

Getting started

Building plugins

Group

Compatibility

Properties

Testing Examples

Simple Group (Copy & Paste Ready)

Group with Help Text

Group with Dependencies

​Compatibility

​Properties

​Testing Examples

​Simple Group (Copy & Paste Ready)

​Group with Help Text

​Group with Dependencies

Compatibility

Properties

Testing Examples

Simple Group (Copy & Paste Ready)

Group with Help Text

Group with Dependencies