Radio

<ul class="kx-select-group">
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__radio">
            <input type="radio"name="radio" />
            <div class="kx-selector__indicator"></div>
            
        </label>
    </li>
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__radio">
            <input type="radio"name="radio" />
            <div class="kx-selector__indicator"></div>
            <span class="label-text">Default radio button</span>
        </label>
    </li>
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__radio">
            <input type="radio"name="radio"checked="checked" />
            <div class="kx-selector__indicator"></div>
            <span class="label-text">Selected radio button</span>
        </label>
    </li>
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__radio">
            <input type="radio"name="radio"disabled="disabled" />
            <div class="kx-selector__indicator"></div>
            <span class="label-text">Disabled radio button</span>
        </label>
    </li>
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__radio">
            <input type="radio"name="radio"checked="checked"disabled="disabled" />
            <div class="kx-selector__indicator"></div>
            <span class="label-text">Disabled selected radio button</span>
        </label>
    </li>
</ul>
{% if not rows %}
<label class="kx-selector kx-selector__radio">
    <input type="radio"{% if name -%} name="{{name}}"{% endif %}{% if checked -%} checked="checked"{% endif %}{% if disabled -%} disabled="disabled"{% endif %} />
    <div class="kx-selector__indicator"></div>
    {% if label -%}<span class="label-text">{{ label }}</span>{% endif %}
</label>
{% else%}
<ul class="kx-select-group">
    {% for row in rows -%}
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__radio">
            <input type="radio"{% if row.name -%} name="{{row.name}}"{% endif %}{% if row.checked -%} checked="checked"{% endif %}{% if row.disabled -%} disabled="disabled"{% endif %} />
            <div class="kx-selector__indicator"></div>
            {% if row.label -%}<span class="label-text">{{ row.label }}</span>{% endif %}
        </label>
     </li>
    {% endfor -%}
</ul>
{% endif %}
{
  "type": "radio",
  "name": "Radio button",
  "label": "Radio Button",
  "checked": null,
  "disabled": null,
  "rows": [
    {
      "checked": null,
      "disabled": null,
      "name": "radio"
    },
    {
      "label": "Default radio button",
      "checked": null,
      "disabled": null,
      "name": "radio"
    },
    {
      "label": "Selected radio button",
      "checked": true,
      "disabled": null,
      "name": "radio"
    },
    {
      "label": "Disabled radio button",
      "checked": null,
      "disabled": true,
      "name": "radio"
    },
    {
      "label": "Disabled selected radio button",
      "checked": true,
      "disabled": true,
      "name": "radio"
    }
  ]
}

There are no notes for this item.