Super Dynamic Fields

Create new field and select any of super dynamic field (Checkboxes, Radio or Dropdown) and scroll to the settings. You have to select JSON template you have added options of and that's it!

You have to follow proper JSON format to add options. There is 2 required JSON fields. i.e., "label" and "value". You can use "default" as "yes" to make any option as default selected. Example of JSON:

[
    {"value" : "option1", "label" : "Option 1"},
    {"value" : "option2", "label" : "Option 2", "default" : "yes"},
    {"value" : "option3", "label" : "Option 3"},
]

"value", "label" and "default" is pre defined variables of JSON. You can also pass anything else in JSON that will become varibale custom field automatically.

[
    {"label": "--" , "value" : "" , "default" : "yes", "link" : ""},
    {"label": "Large" , "value" : "lg", "link" : "<a href='/abc'>Click Here</a>"},
    {"label": "Medium" , "value" : "md", "link" : "<a href='/xyz'>Click Here</a>"}
]
// In this example, link is a custom field.

{% set entries = craft.entries.section("sectionName").limit(11).all() %}
[
    {"label": "--" , "value" : "" , "default" : "yes", "url_title" : ""},
    {% for item in entries %}
        {"label": "{{ item.title }}" , "value" : "{{ item.getId() }}", "slug" : "{{ item.slug }}"}
        {% if not loop.last %},{% endif %}
    {% endfor %}
]
// In this example, slug is a custom field.

Template Code

You can get Value, Label and other custom fields from selected JSON options very easily.

For Singles like Dropdown and Radio Buttons:

// Render Value
  {{ entry.myField }}
  {{ entry.myField.getValue() }}
  {{ entry.myField.value }}

// Render Label
  {{ entry.myField.getLabel() }}
  {{ entry.myField.label }}

// Render Extra fields:
// (extras will always be an array that have other fields from json option.)
  {% set extras = entry.myField.getExtras() %}
  {{ extras.field1 }}
  {{ extras.field2 }}

For Multi like Checkboxes and Multi select fields:

{% for item in entry.myField %}
  // Render Value
    {{ item.myField }}
    {{ item.myField.getValue() }}
    {{ item.myField.value }}

  // Render Label
    {{ item.myField.getLabel() }}
    {{ item.myField.label }}

  // Render Extra fields:
  // (extras will always be an array that have other fields from json option.)
    {% set extras = item.myField.getExtras() %}
    {{ extras.field1 }}
    {{ extras.field2 }}
{% endfor %}