Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developers.kit.com/llms.txt

Use this file to discover all available pages before exploring further.

The radio group component allows creators to choose from mutually exclusive options presented as individual selectable buttons. It’s ideal for settings where only one choice can be made at a time, such as text alignment, layout options, or display modes. The visual button interface makes selection clear and intuitive for creators. example radio button
To get the most out of dependency with radio-groups utilize the value option whereby a field only shows when the corresponding value is selected, using the following syntax:
  {
    "name": "text_alignment",
    "label": "Text Alignment",
    "type": "radioGroup",
    // ...additional component-specific settings
    "dependencies": [
      {
        "field": "field_name",
        "value": "expected_value"
      }
    ]
  }
A typical use case for this would be to create three pre-defined options and a final Custom button, that exposes more granular functionality.

​
Compatibility

Plugin typeAvailabilityAdditional notes
Content blocks
Media source

​
Properties

​
type
string
required
radioGroup - the type of the component
​
name
string
required
A unique internal-only identifier that is posted to an app’s plugin server to share values inputted by the creator
​
label
string
required
Creator-facing identifier that is shown in the plugin environment (64 character limit)
​
options
array
required
Array of objects containing label-value pairs for the radio button options
​
default
string
Default option value that is pre-selected when the component first loads
​
required
boolean
Determines whether the creator must make a selection before proceeding (defaults to false)
​
help
string
Brief creator-facing explanation that clarifies the component’s purpose and usage (256 character limit. Supports markdown: [text](url), **bold**, and *italic*)
​
dependencies
object array
Allows for the field to be shown conditionally. dependent on other fields. See dependencies page for more details.
  {
    "name": "text_alignment",
    "label": "Text Alignment",
    "required": false, // optional - defaults to false
    "help": "Choose how text should be aligned", // optional
    "type": "radioGroup",
    "default": "left", // optional
    "options": [
      {
        "label": "Left",
        "value": "left"
      },
      {
        "label": "Center",
        "value": "center"
      },
      {
        "label": "Right",
        "value": "right"
      }
    ],
    "dependencies": [
      {
          "field": "dependent_field",
          "value": "dependent_value" //optional
      }
    ] // optional
  }

  {
    "settings": {
      "radio_group": "center"
      // ...additional plugin settings
    }
    // ...plugin-specific additional data
  }