Switch 

<ul class="kx-select-group">
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__switch">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>
                
            </label>
    </li>
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__switch">
                <input type="checkbox"name="toggleswitch" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Toggle switch OFF</span>
            </label>
    </li>
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__switch">
                <input type="checkbox"name="toggleswitch"checked="checked" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Toggle switch ON</span>
            </label>
    </li>
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__switch">
                <input type="checkbox"disabled="disabled" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Toggle switch OFF disabled</span>
            </label>
    </li>
    <li class="kx-select-item">
        <label class="kx-selector kx-selector__switch">
                <input type="checkbox"checked="checked"disabled="disabled" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Toggle switch ON disabled</span>
            </label>
    </li>
</ul>
 
{% if not rows %}
<label class="kx-selector kx-selector__switch">
    <input type="checkbox"{% 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__switch">
                <input type="checkbox"{% 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": "checkbox",
  "label": "Toggle switch",
  "name": "toggleswitch",
  "checked": null,
  "disabled": null,
  "rows": [
    {
      "checked": null,
      "disabled": null
    },
    {
      "label": "Toggle switch OFF",
      "name": "toggleswitch",
      "checked": null,
      "disabled": null
    },
    {
      "label": "Toggle switch ON",
      "name": "toggleswitch",
      "checked": true,
      "disabled": null
    },
    {
      "label": "Toggle switch OFF disabled",
      "checked": null,
      "disabled": true
    },
    {
      "label": "Toggle switch ON disabled",
      "checked": true,
      "disabled": true
    }
  ]
}

There are no notes for this item.