radio

A radio button group with predefined options. Similar to select but displays all options as radio buttons instead of a dropdown.

Properties

Property	Type	Required	Description
type	"radio"	Yes	Field type identifier
label	string	Yes	Label shown in the builder
options	Array<{label, value}>	Yes	List of selectable options
default	string	No	Default selected value

Usage

schema.json

{
  "alignment": {
    "type": "radio",
    "label": "Text Alignment",
    "options": [
      { "label": "Left", "value": "left" },
      { "label": "Center", "value": "center" },
      { "label": "Right", "value": "right" }
    ],
    "default": "center"
  }
}

Template

<div style="text-align: {{ widget.settings.alignment }}">
  <h2>{{ widget.settings.title }}</h2>
</div>

Output

The saved value is the value string from the selected option:

{
  "alignment": "center"
}

select vs radio

Use radio when you have 2-4 options and want them all visible at once. Use select for longer lists where a dropdown is more appropriate.

Interactive Preview

Interactive Preview

Text Alignment

LeftCenterRight

Live Output

{
  "alignment": "center"
}