HAS Green Academy styleguide

Form Field Radioset

1179 × 333 
<fieldset>
    <legend class="c-label ">
        Selecteer de juiste waarde
    </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="radio" name="radio_btn_name" id="id_radio_0" value="radio value 0">
                <label for="id_radio_0">Radio label 0</label>
            </div>
        </li>
        <li>
            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                <input class="c-input-control" type="radio" name="radio_btn_name" id="id_radio_1" value="radio value 1">
                <label for="id_radio_1">Radio label 1</label>
            </div>
        </li>
        <li>
            <div class="o-layout  o-layout--gap-tiny  o-layout--fit">
                <input class="c-input-control" type="radio" name="radio_btn_name" id="id_radio_2" value="">
                <label for="id_radio_2">Radio 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' name=../name }}
      </li>
    {{/each}}
  </ul>

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

</fieldset>
 
{
  "label": "Selecteer de juiste waarde",
  "name": "radio_btn_name",
  "items": [
    {
      "id": "id_radio_0",
      "value": "radio value 0",
      "label": "Radio label 0",
      "type": "radio"
    },
    {
      "id": "id_radio_1",
      "value": "radio value 1",
      "label": "Radio label 1",
      "type": "radio"
    },
    {
      "id": "id_radio_2",
      "label": "Radio label 2",
      "for": "id_radio_2",
      "type": "radio"
    }
  ]
}

No notes defined.