Pinecone

Radio Buttons: Default (Inverse) 

<ul class="input-group  input-group--inverse">
    <li><label class="label--radio" for="radio"><input id="radio" type="radio" name="radio" value="" />Radio initially unchecked</label></li>
    <li><label class="label--radio" for="radio checked"><input id="radio checked" type="radio" name="radio" value="" checked />Radio initially checked</label></li>
    <li><label class="label--radio" for="radio disabled"><input id="radio disabled" type="radio" name="radio" value="" disabled />Radio disabled</label></li>
</ul>
 
<ul class="input-group {% if inverse %} input-group--inverse{% endif %}{% if select.modifiers %}{% for modifier in select.modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
{% for radioButton in radioButtons %}
<li><label class="label--radio" for="{{ radioButton.name }}"><input id="{{ radioButton.name }}" type="radio" name="radio" value="{{ value }}"{% if radioButton.checked %} checked{% elseif radioButton.disabled %} disabled{% endif %} />{{ radioButton.label }}</label></li>
{% endfor %}
</ul>
 
{
  "radioButtons": [
    {
      "name": "radio",
      "label": "Radio initially unchecked"
    },
    {
      "name": "radio checked",
      "label": "Radio initially checked",
      "checked": true
    },
    {
      "name": "radio disabled",
      "label": "Radio disabled",
      "disabled": true
    }
  ],
  "inverse": true,
  "bodyClass": "has-dark-mint-500-background-color",
  "modifiers": [
    "inverse"
  ]
}

There are no notes for this item.