Pinecone

Custom Checkboxes: Default 

<ul id="nested-checkboxes" class="input-group input-group__parent checkbox">
    <li>
        <label for="parent-item-1-(initially-unchecked)">
            <input class="input--parent" 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 checkbox input-group__descendant">
            <li>
                <label for="sub-item-1">
                    <input id="sub-item-1" type="checkbox" name="" value="sub-item-1" />Sub item 1
                </label>
            </li>
            <li>
                <label for="sub-item-2">
                    <input id="sub-item-2" type="checkbox" name="" value="sub-item-2" />Sub item 2
                </label>
            </li>
            <li>
                <label for="sub-item-3">
                    <input id="sub-item-3" type="checkbox" name="" value="sub-item-3" />Sub item 3
                </label>
            </li>
        </ul>
    </li>
    <li>
        <label for="parent-item-2-(initially-mixed)">
            <input class="input--parent" 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 checkbox input-group__descendant">
            <li>
                <label for="sub-item-4">
                    <input id="sub-item-4" type="checkbox" name="" value="sub-item-4" checked />Sub item 4
                </label>
            </li>
            <li>
                <label for="sub-item-5">
                    <input id="sub-item-5" type="checkbox" name="" value="sub-item-5" />Sub item 5
                </label>
            </li>
            <li>
                <label for="sub-item-6">
                    <input id="sub-item-6" type="checkbox" name="" value="sub-item-6" checked />Sub item 6
                </label>
            </li>
        </ul>
    </li>
    <li>
        <label for="parent-item-3-(initially-all-checked)">
            <input class="input--parent" 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 checkbox input-group__descendant">
            <li>
                <label for="sub-item-7">
                    <input id="sub-item-7" type="checkbox" name="" value="sub-item-7" checked />Sub item 7
                </label>
            </li>
            <li>
                <label for="sub-item-8">
                    <input id="sub-item-8" type="checkbox" name="" value="sub-item-8" checked />Sub item 8
                </label>
            </li>
            <li>
                <label for="sub-item-9">
                    <input id="sub-item-9" type="checkbox" name="" value="sub-item-9" checked />Sub item 9
                </label>
            </li>
        </ul>
    </li>
</ul>
 
<ul id="{{ label | slugify }}" class="input-group input-group__parent checkbox">
	{% for item in items %}
	<li>
		{% if item.children %}
			{% render '@checkbox', {label: item.label, value: item.label | slugify, name: item.label | slugify, standAlone: false, className: 'input--parent'}, true %}
			{% render '@checkboxes', {checkboxes: item.children, className: 'input-group__descendant'}, true %}
		{% 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
        }
      ]
    }
  ]
}

There are no notes for this item.