radio

---

The radio property provides a set of options where the user can select only one. It maps to a standard HTML <input type="radio"> group and is ideal for mutually exclusive choices like layouts, styles, or size selectors.

Radio Definition

{
  "code": "theme_choice",
  "prompt": "Choose a Theme",
  "type": "radio",
  "required": true,
  "options": [
    { "text": "Light", "value": "light" },
    { "text": "Dark", "value": "dark" },
    { "text": "Auto", "value": "auto" }
  ]
}

Supported Fields

Field	Type	Required	Description
code	string	Yes	Unique key used in l.settings:instance.
prompt	string	Yes	Label shown in the admin interface.
type	string	Yes	Must be "radio".
required	boolean	No	If true, user must select an option before saving.
options	array	Yes	List of { "text": string, "value": string } objects.
preview_property_selector	string	No	Target element for PageBuilder Inspector.
visibility_conditions	object	No	Shows/hides field based on logic.

l.settings:instance Structure

:theme_choice:value=dark

Only the selected option’s value is stored.

Template Usage

<p>Selected Theme: &mvte:instance:theme_choice:value;</p>

<mvt:if expr="l.settings:instance:theme_choice:value EQ 'dark'">
  <div class="dark-mode">Dark mode enabled</div>
</mvt:if>

JavaScript Access

<script>
  var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  var theme = instance.theme_choice.value;
</script>

defaults Definition

To pre-select a radio option, use the defaults block:

"defaults": {
  "theme_choice": {
    "value": "dark"
  }
}

Best Practices

• Always provide at least two options.
• Use lowercase, semantic values for consistency in logic ("light", "dark", "auto").
• Add required: true if an option must be selected.
• Use the value field (not text) in your logic and template comparisons.

Complete Example

{
  "code": "layout_mode",
  "prompt": "Layout Mode",
  "type": "radio",
  "required": true,
  "options": [
    { "text": "Compact", "value": "compact" },
    { "text": "Wide", "value": "wide" }
  ]
}