Freie Grundschule Pfefferwerk - Frontend Design

Form Field Checkbox 

<div class="c-form__group ">

    <!--
            @int:
            provide nested fieldset and legend for each list
        -->
    <fieldset class="c-form__fieldset c-form__checkfields">

        <legend class="c-form__legend">Bezeichnung für Checkboxen</legend>

        <ul class="c-checkfields-list">
            <li class="c-checkfields-list__item">
                <input id="input-checkbox-label-1" type="checkbox" name="input-checkbox-name-1" checked>
                <label for="input-checkbox-label-1">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
            </li>

            <li class="c-checkfields-list__item">
                <input id="input-checkbox-label-2" type="checkbox" name="input-checkbox-name-1">
                <label for="input-checkbox-label-2">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
            </li>
        </ul>

    </fieldset>

</div>
 
<div class="c-form__group {{#if isValid}}is-valid{{/if}}{{#if isError}}is-error{{/if}}">

    {{# if singleCheckbox}}
        <!-- single checkbox -->
        <div class="c-form__checkfields">
            <input id="input-checkbox-label-3" type="checkbox" name="input-checkbox-name-3">
            <label for="input-checkbox-label-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</label>
        </div>

    {{else}}
        <!--
            @int:
            provide nested fieldset and legend for each list
        -->
        <fieldset class="c-form__fieldset c-form__checkfields">

            <legend class="c-form__legend">{{fieldsetLegend}}</legend>

            <ul class="c-checkfields-list">
                <li class="c-checkfields-list__item">
                    <input id="input-checkbox-label-1" type="checkbox" name="input-checkbox-name-1" checked>
                    <label for="input-checkbox-label-1">{{textM}}</label>
                </li>

                <li class="c-checkfields-list__item">
                    <input id="input-checkbox-label-2" type="checkbox" name="input-checkbox-name-1">
                    <label for="input-checkbox-label-2">{{textM}}</label>
                </li>
            </ul>

        </fieldset>

    {{/if}}
</div>
 
{
  "fieldsetLegend": "Bezeichnung für Checkboxen",
  "isValid": null,
  "isError": null,
  "textS": "Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.",
  "textM": "Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus."
}

There are no notes for this item.