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.
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 type Availability Additional notes Content blocks Media source
Properties
radioGroup
- the type of the component
A unique internal-only identifier that is posted to an app’s plugin server to share values inputted by the creator
Creator-facing identifier that is shown in the plugin environment (64 character limit)
Array of objects containing label-value pairs for the radio button options A unique internal-only identifier that is posted to an app’s plugin server to share values from the specific button selected by the creator
Creator-facing identifier that is shown on the button (character length across all labels in the component cannot exceed 28 characters)
Default option value that is pre-selected when the component first loads
Determines whether the creator must make a selection before proceeding (defaults to false)
Brief creator-facing explanation that clarifies the component’s purpose and usage (64 character limit)
Allows for the field to be shown conditionally. dependent on other fields. See dependencies page for more details. Name of the dependent field
Value for the dependent field required to show this field. To show when any value is inputted, leave out this property.
{
"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
}