Form

HTML

<ul class="kx-select-group">

    <li class="kx-select-item">
        <label class="kx-ui kx-selector kx-selector__checkbox">
                <input type="checkbox" name="checkbox" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Default checkbox</span>
            </label>
    </li>

    <li class="kx-select-item">
        <label class="kx-ui kx-selector kx-selector__checkbox">
                <input type="checkbox" name="checkbox" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Default checkbox</span>
            </label>
    </li>

    <li class="kx-select-item">
        <label class="kx-ui kx-selector kx-selector__checkbox">
                <input type="checkbox" name="checkbox" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Default checkbox</span>
            </label>
    </li>

    <li class="kx-select-item">
        <label class="kx-ui kx-selector kx-selector__checkbox">
                <input type="checkbox" name="checkbox" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Default checkbox</span>
            </label>
    </li>

    <li class="kx-select-item">
        <label class="kx-ui kx-selector kx-selector__checkbox">
                <input type="checkbox" name="checkbox" />
                <div class="kx-selector__indicator"></div>
                <span class="label-text">Default checkbox</span>
            </label>
    </li>

</ul>

View

{% if not rows %}
<label class="kx-ui kx-selector kx-selector__checkbox">
    <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-ui kx-selector kx-selector__checkbox">
                <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>
        </li>
    {% endfor %}
</ul>
{% endif %}