UI templating

An autocomplete dropdown that allows users to search and select from a predefined list of values. Use fixed values when the available options are known in advance and unlikely to change.

[{
    "type": "autocomplete",
    "name": "region",
    "label": "Region",
    "data": {
        "source": "fixed",
        "values": [
            {
                "value": "us-east-1",
                "label": "US East (N. Virginia)"
            },
            {
                "value": "us-east-2",
                "label": "US East (Ohio)"
            }
        ]
    },
    "allowCustomValues": true
}]

A checkbox input for enabling or disabling a boolean option. Use defaultValue to control whether the checkbox is selected by default.

{
    "type": "checkbox",
    "name": "enabled",
    "label": "Enable feature",
    "defaultValue": true
}

A selectable chip group that allows users to choose from a set of predefined options. Choice chips provide a compact, visual alternative to radio buttons or dropdowns for short lists of values.

{
    "type": "choiceChips",
    "name": "tags",
    "label": "Tags",
    "options": [
        {
            "value": "a",
            "label": "Option A"
        },
        {
            "value": "b",
            "label": "Option B"
        }
    ]
}

A syntax-highlighted Monaco code editor for structured or multi-line content such as JSON payloads, SQL queries, scripts, or request bodies. Use the language property to enable appropriate syntax highlighting and editor behavior.

{
    "type": "code",
    "name": "body",
    "label": "Request Body",
    "language": "json"
}

An expression input for dynamic values or logic-based configuration. Expressions support Mustache variables, allowing values to be injected dynamically at runtime, such as dashboard variables, timeframe values, or parameter inputs.

{
    "type": "expression",
    "name": "filter",
    "label": "Filter Expression"
}

A JSON editor for entering structured configuration data as valid JSON. Use this input when users need to supply complex objects, arrays, or nested configuration values.

{
    "type": "json",
    "name": "config",
    "label": "Configuration"
}

A key-value editor for entering collections of paired values such as HTTP headers, query parameters, environment variables, or metadata. Users can add, edit, and remove entries dynamically.

{
    "type": "key-value",
    "name": "headers",
    "label": "Headers"
}

A read-only Markdown content block for displaying formatted guidance, instructions, warnings, or contextual information within the configuration UI. Supports standard Markdown formatting such as headings, bold text, lists, and links.

{
    "type": "markdown",
    "name": "info",
    "content": "**Note:** Replace the placeholder values below."
}

A numeric input for integer or decimal values such as ports, thresholds, limits, or timeouts. Use defaultValue to provide an initial value when the field is first displayed.

{
    "type": "number",
    "name": "port",
    "label": "Port",
    "defaultValue": 443
}

An object picker that allows users to select one or more indexed objects from the SquaredUp graph. Use matches to control which objects are available for selection based on a matching expression or filter.

{
    "type": "objects",
    "name": "scope",
    "label": "Scope",
    "matches": "true"
}

A secure text input for sensitive values such as API keys, passwords, or tokens. Values entered into a password field are masked in the UI.

{
  "type": "password",
  "name": "apiKey",
  "label": "API Key"
}

A radio button group that allows users to select a single option from a small set of predefined values. Radio buttons are best used when all available options should be visible at once.

{
    "type": "radio",
    "name": "environment",
    "label": "Environment",
    "options": [
        {
            "value": "prod",
            "label": "Production"
        },
        {
            "value": "dev",
            "label": "Development"
        }
    ]
}

A toggle-style selector that allows users to switch between a small set of predefined options. Switch inputs are best suited to simple view or mode changes where only one option can be selected at a time.

{
    "type": "switch",
    "name": "view",
    "label": "View",
    "options": [
        {
            "value": "table",
            "label": "Table"
        },
        {
            "value": "chart",
            "label": "Chart"
        }
    ]
}

A single-line text input for freeform values such as hostnames, IDs, search terms, or query parameters. Use placeholder to provide an example or suggested format for the expected value.

{
    "type": "text",
    "name": "hostname",
    "label": "Hostname",
    "placeholder": "api.example.com"
}

A multi-line text input for longer freeform content such as queries, descriptions, scripts, or notes. Use rows to control the initial visible height of the text area.

{
    "type": "textarea",
    "name": "query",
    "label": "Query",
    "rows": 5
}

A toggle control for enabling or disabling a boolean setting. Toggles are best used for simple on/off configuration options. Use defaultValue to control the initial state of the toggle.

{
    "type": "toggle",
    "name": "advancedMode",
    "label": "Advanced Mode",
    "defaultValue": false
}