DSO Component Library

Vertical Group Checkboxes 

<fieldset class="form-group radios">
    <legend class="control-label">Getal</legend>
    <div class="radio">
        <label>
        <input type="radio" name="checkbox_voorbeeld" value="1" /> een
      </label>
    </div>
    <div class="radio">
        <label>
        <input type="radio" name="checkbox_voorbeeld" value="2" /> twee
      </label>
    </div>
    <div class="radio">
        <label>
        <input type="radio" name="checkbox_voorbeeld" value="3" /> drie
      </label>
    </div>
    <p class="help-block" id="helpTextId_checkbox_voorbeeld">Kies een even getal</p>
</fieldset>
 
<fieldset class="form-group radios">
  <legend class="control-label">{{ label }}</legend>
  {{#each options }}
    <div class="radio">
      <label>
        <input type="radio" name="{{ ../id }}" value="{{ value }}"{{{ifattr ' disabled' disabled }}}{{{ifattr ' readonly' readonly }}}{{{ifattr ' checked' checked }}} /> {{ label }}
      </label>
    </div>
  {{/each}}
  {{#if helpText }}
    {{> '@help-block' }}
  {{/if}}
</fieldset>
 
id: checkbox_voorbeeld
label: Getal
helpText: Kies een even getal
options:
  - value: 1
    label: een
  - value: 2
    label: twee
  - value: 3
    label: drie

Een help block staat altijd direct in de .form-group.

Als de checkbox een disabled state heeft, dan moet er een .disabled op de .radio worden geplaatst. Zonder deze modifier zal er geen “niet toegestaan” cursor op het label zijn