DSO Component Library

Horizontal Group Checkboxes 

<fieldset class="form-group checkboxes">
    <legend class="control-label">Even getallen</legend>
    <div class="field-container">
        <div class="checkbox">
            <label>
          <input type="checkbox" name="checkbox_voorbeeld" value="1"
            
            
             />
          een
        </label>
        </div>
        <div class="checkbox">
            <label>
          <input type="checkbox" name="checkbox_voorbeeld" value="2"
            
            
             />
          twee
        </label>
        </div>
        <div class="checkbox">
            <label>
          <input type="checkbox" name="checkbox_voorbeeld" value="3"
            
            
             />
          drie
        </label>
        </div>
        <p class="help-block" id="helpTextId_checkbox_voorbeeld">Selecteer alle even getallen</p>
    </div>
</fieldset>
 
<fieldset class="form-group checkboxes">
  <legend class="control-label">{{ label }}</legend>
  <div class="field-container">
    {{#each options }}
      <div class="checkbox">
        <label>
          <input type="checkbox" name="{{ ../id }}" value="{{ value }}"
            {{{ifattr 'disabled' disabled }}}
            {{{ifattr 'readonly' readonly }}}
            {{{ifattr 'checked' checked }}} />
          {{ label }}
        </label>
      </div>
    {{/each}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
</fieldset>
 
id: checkbox_voorbeeld
label: Even getallen
helpText: Selecteer alle even getallen
options:
  - value: 1
    label: een
  - value: 2
    label: twee
  - value: 3
    label: drie
  • Handle: @horizontal-group-checkboxes
  • Preview:
  • Filesystem Path: components\03-forms\01-horizontal\groups\horizontal-group-checkboxes.hbs
  • References (1): @help-block

There are no notes for this item.