HAS Green Academy styleguide

Form Checkbox List

1179 × 333 
<fieldset>

    <legend class="c-label ">
        Selecteer een of meerdere velden
    </legend>

    <ul class="o-list-clean  o-flow  o-flow--tiny">
        <li>
            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                <input class="c-input-control" type="checkbox" name="id_checkbox_0" id="id_checkbox_0" value="checkbox value 0">
                <label for="id_checkbox_0">Checkbox label 0</label>
            </div>
        </li>
        <li>
            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                <input class="c-input-control" type="checkbox" name="id_checkbox_1" id="id_checkbox_1" value="checkbox value 1">
                <label for="id_checkbox_1">Checkbox label 1</label>
            </div>
        </li>
        <li>
            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                <input class="c-input-control" type="checkbox" name="id_checkbox_2" id="id_checkbox_2" value="checkbox value 2">
                <label for="id_checkbox_2">Checkbox label 2</label>
            </div>
        </li>
    </ul>

    <div class="c-validation-message">Dit is een input validatie error</div>

</fieldset>
 
<fieldset>

  {{> '@atoms-form-label' isLegend=true label=label }}

  <ul class="o-list-clean  o-flow  o-flow--tiny">
    {{#each items }}
      <li>
        {{> '@atoms-input-control' type='checkbox' }}
      </li>
    {{/each}}
  </ul>

  {{ render '@atoms-input-validation' validationMessage }}

</fieldset>
 
{
  "label": "Selecteer een of meerdere velden",
  "items": [
    {
      "id": "id_checkbox_0",
      "name": "id_checkbox_0",
      "value": "checkbox value 0",
      "label": "Checkbox label 0"
    },
    {
      "id": "id_checkbox_1",
      "name": "id_checkbox_1",
      "value": "checkbox value 1",
      "label": "Checkbox label 1"
    },
    {
      "id": "id_checkbox_2",
      "name": "id_checkbox_2",
      "value": "checkbox value 2",
      "label": "Checkbox label 2",
      "for": "id_checkbox_2"
    }
  ]
}

No notes defined.