Freie Grundschule Pfefferwerk - Frontend Design

Form Field Radio 

<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 Radio-Buttons</legend>

        <ul class="c-checkfields-list">

            <li class="c-checkfields-list__item">
                <input id="input-radio-label-1" type="radio" name="input-radio-name-1" checked>
                <label for="input-radio-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-radio-label-2" type="radio" name="input-radio-name-1">
                <label for="input-radio-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}}">
    <!--
        @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-radio-label-1" type="radio" name="input-radio-name-1" checked>
                <label for="input-radio-label-1">{{textM}}</label>
            </li>

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

    </fieldset>
</div>
 
{
  "fieldsetLegend": "Bezeichnung für Radio-Buttons",
  "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.