Pinecone

Custom Checkboxes: Default (Inverse) 

<ul id="nested-checkboxes" class="input-group input-group__parent nested-checkboxes  input-group--inverse">
    <li>
        <label class="label--checkbox" for="parent-item-1-(initially-unchecked)"><input id="parent-item-1-(initially-unchecked)" type="checkbox" name="parent-item-1-(initially-unchecked)" value="parent-item-1-(initially-unchecked)" />Parent item 1 (initially unchecked)</label>
        <ul class="input-group input-group__descendant input-group--inverse input-group--inverse">
            <li><label class="label--checkbox" for="sub-item-1"><input id="sub-item-1" type="checkbox" name="sub-item-1" value="sub-item-1" />Sub item 1</label>
            </li>
            <li><label class="label--checkbox" for="sub-item-2"><input id="sub-item-2" type="checkbox" name="sub-item-2" value="sub-item-2" />Sub item 2</label>
            </li>
            <li><label class="label--checkbox" for="sub-item-3"><input id="sub-item-3" type="checkbox" name="sub-item-3" value="sub-item-3" />Sub item 3</label>
            </li>
        </ul>
    </li>
    <li>
        <label class="label--checkbox" for="parent-item-2-(initially-mixed)"><input id="parent-item-2-(initially-mixed)" type="checkbox" name="parent-item-2-(initially-mixed)" value="parent-item-2-(initially-mixed)" />Parent item 2 (initially mixed)</label>
        <ul class="input-group input-group__descendant input-group--inverse input-group--inverse">
            <li><label class="label--checkbox" for="sub-item-4"><input id="sub-item-4" type="checkbox" name="sub-item-4" value="sub-item-4" checked />Sub item 4</label>
            </li>
            <li><label class="label--checkbox" for="sub-item-5"><input id="sub-item-5" type="checkbox" name="sub-item-5" value="sub-item-5" />Sub item 5</label>
            </li>
            <li><label class="label--checkbox" for="sub-item-6"><input id="sub-item-6" type="checkbox" name="sub-item-6" value="sub-item-6" checked />Sub item 6</label>
            </li>
        </ul>
    </li>
    <li>
        <label class="label--checkbox" for="parent-item-3-(initially-all-checked)"><input id="parent-item-3-(initially-all-checked)" type="checkbox" name="parent-item-3-(initially-all-checked)" value="parent-item-3-(initially-all-checked)" />Parent item 3 (initially all checked)</label>
        <ul class="input-group input-group__descendant input-group--inverse input-group--inverse">
            <li><label class="label--checkbox" for="sub-item-7"><input id="sub-item-7" type="checkbox" name="sub-item-7" value="sub-item-7" checked />Sub item 7</label>
            </li>
            <li><label class="label--checkbox" for="sub-item-8"><input id="sub-item-8" type="checkbox" name="sub-item-8" value="sub-item-8" checked />Sub item 8</label>
            </li>
            <li><label class="label--checkbox" for="sub-item-9"><input id="sub-item-9" type="checkbox" name="sub-item-9" value="sub-item-9" checked />Sub item 9</label>
            </li>
        </ul>
    </li>
</ul>
 
<ul id="{{ label | slugify }}" class="input-group input-group__parent {{ label | slugify }} {% if inverse %} input-group--inverse{% endif %}">
	{% for item in items %}
	<li>
		{% if item.children %}
			{% render '@checkbox', {label: item.label, value: item.label | slugify, name: item.label | slugify, standAlone: false}, true %}
			<ul class="input-group input-group__descendant{% if inverse %} input-group--inverse{% endif %}{% if modifiers %}{% for modifier in modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
				{% for child in item.children %}
				<li>{% render '@checkbox', {label: child.label, value: child.label | slugify, name: child.label | slugify, checked: child.checked, standAlone: false}, true %}</li>
				{% endfor %}
			</ul>
    {% endif %}
	</li>
	{% endfor %}
</ul>
 
{
  "label": "Nested Checkboxes",
  "items": [
    {
      "label": "Parent item 1 (initially unchecked)",
      "children": [
        {
          "label": "Sub item 1"
        },
        {
          "label": "Sub item 2"
        },
        {
          "label": "Sub item 3"
        }
      ]
    },
    {
      "label": "Parent item 2 (initially mixed)",
      "children": [
        {
          "label": "Sub item 4",
          "checked": true
        },
        {
          "label": "Sub item 5"
        },
        {
          "label": "Sub item 6",
          "checked": true
        }
      ]
    },
    {
      "label": "Parent item 3 (initially all checked)",
      "children": [
        {
          "label": "Sub item 7",
          "checked": true
        },
        {
          "label": "Sub item 8",
          "checked": true
        },
        {
          "label": "Sub item 9",
          "checked": true
        }
      ]
    }
  ],
  "bodyClass": "has-dark-mint-500-background-color",
  "inverse": true,
  "modifiers": [
    "inverse"
  ]
}

There are no notes for this item.