Group Checkboxes

WIP

HTML
View
Context
Info
Notes
WCAG


        
        
            <!-- Default -->
<fieldset class="form-group dso-checkboxes">
    <legend class="dso-label-container">
        <label class="control-label">
            Maak een keuze
        </label>
    </legend>
    <div class="dso-field-container">
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-0" name="input-checkbox" value="1" />
            <label for="input-checkbox-0">
                een
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2" />
            <label for="input-checkbox-1">
                twee
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3" />
            <label for="input-checkbox-2">
                drie
            </label>
        </div>
    </div>
</fieldset>


        
            <!-- Input Checkbox Required -->
<fieldset class="form-group dso-checkboxes dso-required">
    <legend class="dso-label-container">
        <label class="control-label">
            Maak een keuze
        </label>
    </legend>
    <div class="dso-field-container">
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1" />
            <label for="input-checkbox-required-0">
                een
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2" />
            <label for="input-checkbox-required-1">
                twee
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3" />
            <label for="input-checkbox-required-2">
                drie
            </label>
        </div>
    </div>
</fieldset>


        
            <!-- Input Checkbox Invalid -->
<fieldset class="form-group dso-checkboxes dso-invalid dso-required">
    <legend class="dso-label-container">
        <label class="control-label">
            Maak een keuze
        </label>
    </legend>
    <div class="dso-field-container">
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked />
            <label for="input-checkbox-invalid-0">
                een
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2" />
            <label for="input-checkbox-invalid-1">
                twee
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3" />
            <label for="input-checkbox-invalid-2">
                drie
            </label>
        </div>
        <p class="dso-message">Selecteer minimaal 2 velden</p>
    </div>
</fieldset>


        
            <!-- Input Checkbox Valid -->
<fieldset class="form-group dso-checkboxes dso-valid dso-required">
    <legend class="dso-label-container">
        <label class="control-label">
            Maak een keuze
        </label>
    </legend>
    <div class="dso-field-container">
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1" />
            <label for="input-checkbox-valid-0">
                een
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked />
            <label for="input-checkbox-valid-1">
                twee
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3" />
            <label for="input-checkbox-valid-2">
                drie
            </label>
        </div>
        <p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
    </div>
</fieldset>


        
            <!-- Input Checkbox Disabled -->
<fieldset class="form-group dso-checkboxes dso-required">
    <legend class="dso-label-container">
        <label class="control-label">
            Maak een keuze
        </label>
    </legend>
    <div class="dso-field-container">
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled checked />
            <label for="input-checkbox-disabled-0">
                een
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled />
            <label for="input-checkbox-disabled-1">
                twee
            </label>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled />
            <label for="input-checkbox-disabled-2">
                drie
            </label>
        </div>
    </div>
</fieldset>


        
            <!-- Input Checkbox Info Button -->
<fieldset class="form-group dso-checkboxes dso-required">
    <legend class="dso-label-container">
        <label class="control-label">
            Maak een keuze
        </label>
        <button type="button" class="btn dso-field-info-button dso-open">
            <span class="sr-only">
                Toelichting
            </span>
        </button>
    </legend>
    <div class="dso-field-container">
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-info-button-0" name="input-checkbox-info-button" value="1" />
            <label for="input-checkbox-info-button-0">
                een
            </label>
            <button type="button" class="btn dso-field-info-button">
                <span class="sr-only">
                    Toelichting
                </span>
            </button>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-info-button-1" name="input-checkbox-info-button" value="2" />
            <label for="input-checkbox-info-button-1">
                twee
            </label>
            <button type="button" class="btn dso-field-info-button dso-open">
                <span class="sr-only">
                    Toelichting
                </span>
            </button>
            <div class="dso-field-info">
                <button type="button">
                    <span class="sr-only">Sluiten</span>
                </button>
                <div class="dso-rich-content">
                    <h4>Heading 4</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                        Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                        Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                    </p>

                </div>
            </div>
        </div>
        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-info-button-2" name="input-checkbox-info-button" value="3" />
            <label for="input-checkbox-info-button-2">
                drie
            </label>
        </div>
    </div>
    <div class="dso-field-info">
        <button type="button">
            <span class="sr-only">Sluiten</span>
        </button>
        <div class="dso-rich-content">
            <h4>Heading 4</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
            </p>

        </div>
    </div>
</fieldset>


        <fieldset class="form-group dso-checkboxes{{#if state}} dso-{{ state }}{{/if}}{{#if required }} dso-required{{/if}}">
  <legend class="dso-label-container">
    <label class="control-label">
      {{ label }}
    </label>
    {{#if infoText }}
      {{> '@form-field-info-button' }}
    {{/if}}
  </legend>
  <div class="dso-field-container">
    {{#each options }}
      <div class="dso-selectable">
        <input type="checkbox" id="{{ ../id }}-{{ @index }}" name="{{ ../id }}" value="{{ value }}"
          {{{ifattr 'disabled' disabled }}}
          {{{ifattr 'checked' checked }}}
          {{{ifattr 'required' required }}} />
        <label for="{{ ../id }}-{{ @index }}">
          {{ label }}
        </label>
        {{#if infoText }}
          {{> '@form-field-info-button' }}
        {{/if}}
        {{#if infoOpen }}
          {{> '@form-field-info' }}
        {{/if}}
      </div>
    {{/each}}
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
  {{#if infoOpen }}
    {{> '@form-field-info' }}
  {{/if}}
</fieldset>


        
        
            /* Default */
id: input-checkbox
label: Maak een keuze
options:
  - value: 1
    label: een
    id: checkbox_1
  - value: 2
    label: twee
    id: checkbox_2
  - value: 3
    label: drie
    id: checkbox_3



        
            /* Input Checkbox Required */
id: input-checkbox-required
label: Maak een keuze
options:
  - value: 1
    label: een
  - value: 2
    label: twee
  - value: 3
    label: drie
__title: Verplicht
__explanation:
  - >-
    Een verplichte keuze wordt in de markup aangegeven met
    <code>.dso-required</code> op de <code>.form-group.dso-checkboxes</code>
  - >-
    Checkboxes hebben (net zoals radio's) een <code>fieldset.form-group</code>
    als root element, geen <code>div.form-group</code>
required: true



        
            /* Input Checkbox Invalid */
id: input-checkbox-invalid
label: Maak een keuze
options:
  - value: 1
    label: een
    checked: true
  - value: 2
    label: twee
  - value: 3
    label: drie
__title: Ongeldig
__explanation: >-
  Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op
  de <code>.form-group.dso-checkboxes</code> geplaatst te worden
required: true
state: invalid
errorText: Selecteer minimaal 2 velden



        
            /* Input Checkbox Valid */
id: input-checkbox-valid
label: Maak een keuze
options:
  - value: 1
    label: een
  - value: 2
    label: twee
    checked: true
  - value: 3
    label: drie
__title: Geldig
__explanation: >-
  Een ongeldige checkbox-group welke geldig is gemaakt, dient de
  <code>.dso-invalid</code> class vervangen te worden door
  <code>.dso-valid</code>
required: true
helpText: Selecteer alle even getallen
state: valid



        
            /* Input Checkbox Disabled */
id: input-checkbox-disabled
label: Maak een keuze
options:
  - value: 1
    label: een
    disabled: true
    checked: true
  - value: 2
    label: twee
    disabled: true
  - value: 3
    label: drie
    disabled: true
__title: Disabled
__explanation: >-
  Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code>
  attribuut krijgen.
required: true



        
            /* Input Checkbox Info Button */
id: input-checkbox-info-button
label: Maak een keuze
options:
  - value: 1
    label: een
    infoText: |
      Closed
  - value: 2
    label: twee
    infoOpen: true
    infoText: |
      <h4>Heading 4</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
        Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
        Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
      </p>
  - value: 3
    label: drie
__title: Infobutton
__explanation:
  - >-
    Een checkbox fieldset kan op twee plekken een info button krijgen. Naast de
    de vraag en per optie. Als een toelichting is opengeklapt moet er
    <code>.dso-open</code> op de toelichting button geplaatst worden.
required: true
infoOpen: true
infoText: |
  <h4>Heading 4</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>

Handle: @group-checkboxes
Variants (6): Default , Input Checkbox Required , Input Checkbox Invalid , Input Checkbox Valid , Input Checkbox Disabled , Input Checkbox Info Button
Preview:
- With layout
- Component only
Filesystem Path: components\03-forms\01-groups\group-checkboxes.hbs
References (4): @form-field-info-button, @form-field-info, @error-block, @help-block

Een checkbox group heeft een root element fieldset.form-group, en geen div.form-group.

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h4 element appears to be the primary document heading, so should be an h1 element.

<h4>Heading 4</h4>

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<label class="control-label">
      Maak een keuze
    </label>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Group Checkboxes

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<input type="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<form class="form-horizontal">
        <!-- Start: @group-checkboxes--default -->
<fieldset class="form-group dso-checkboxes">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">
        <label for="input-checkbox-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2">
        <label for="input-checkbox-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3">
        <label for="input-checkbox-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
<!-- End: @group-checkboxes--default --><hr>

<!-- Start: @group-checkboxes--input-checkbox-required -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Verplicht</h2>
                <p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-checkboxes</code></p>
<p>Checkboxes hebben (net zoals radio's) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1">
        <label for="input-checkbox-required-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2">
        <label for="input-checkbox-required-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3">
        <label for="input-checkbox-required-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-required --><hr>

<!-- Start: @group-checkboxes--input-checkbox-invalid -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Ongeldig</h2>
                <p>Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op de <code>.form-group.dso-checkboxes</code> geplaatst te worden</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-invalid dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked="">
        <label for="input-checkbox-invalid-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2">
        <label for="input-checkbox-invalid-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3">
        <label for="input-checkbox-invalid-2">
          drie
        </label>
      </div>
      <p class="dso-message">Selecteer minimaal 2 velden</p>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-invalid --><hr>

<!-- Start: @group-checkboxes--input-checkbox-valid -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Geldig</h2>
                <p>Een ongeldige checkbox-group welke geldig is gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door <code>.dso-valid</code></p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-valid dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1">
        <label for="input-checkbox-valid-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked="">
        <label for="input-checkbox-valid-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3">
        <label for="input-checkbox-valid-2">
          drie
        </label>
      </div>
      <p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-valid --><hr>

<!-- Start: @group-checkboxes--input-checkbox-disabled -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Disabled</h2>
                <p>Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code> attribuut krijgen.</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled="" checked="">
        <label for="input-checkbox-disabled-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled="">
        <label for="input-checkbox-disabled-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled="">
        <label for="input-checkbox-disabled-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-disabled --><hr>

<!-- Start: @group-checkboxes--input-checkbox-info-button -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Infobutton</h2>
                <p>Een checkbox fieldset kan op twee plekken een info button krijgen. Naast de de vraag en per optie. Als een toelichting is opengeklapt moet er <code>.dso-open</code> op de toelichting button geplaatst worden.</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
      <button type="button" class="btn dso-field-info-button dso-open">
        <span class="sr-only">
          Toelichting
        </span>
      </button>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-0" name="input-checkbox-info-button" value="1">
        <label for="input-checkbox-info-button-0">
          een
        </label>
          <button type="button" class="btn dso-field-info-button">
            <span class="sr-only">
              Toelichting
            </span>
          </button>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-1" name="input-checkbox-info-button" value="2">
        <label for="input-checkbox-info-button-1">
          twee
        </label>
          <button type="button" class="btn dso-field-info-button dso-open">
            <span class="sr-only">
              Toelichting
            </span>
          </button>
          <div class="dso-field-info">
            <button type="button">
              <span class="sr-only">Sluiten</span>
            </button>
            <div class="dso-rich-content">
              <h4>Heading 4</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
            Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
            Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
          </p>
          
            </div>
          </div>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-2" name="input-checkbox-info-button" value="3">
        <label for="input-checkbox-info-button-2">
          drie
        </label>
      </div>
  </div>
    <div class="dso-field-info">
      <button type="button">
        <span class="sr-only">Sluiten</span>
      </button>
      <div class="dso-rich-content">
        <h4>Heading 4</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
      Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
      Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
    </p>
    
      </div>
    </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-info-button --><hr>

        <button type="submit" class="hidden">VALIDATOR_ONLY</button>
      </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<form class="form-horizontal">
        <!-- Start: @group-checkboxes--default -->
<fieldset class="form-group dso-checkboxes">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">
        <label for="input-checkbox-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2">
        <label for="input-checkbox-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3">
        <label for="input-checkbox-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
<!-- End: @group-checkboxes--default --><hr>

<!-- Start: @group-checkboxes--input-checkbox-required -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Verplicht</h2>
                <p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-checkboxes</code></p>
<p>Checkboxes hebben (net zoals radio's) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1">
        <label for="input-checkbox-required-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2">
        <label for="input-checkbox-required-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3">
        <label for="input-checkbox-required-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-required --><hr>

<!-- Start: @group-checkboxes--input-checkbox-invalid -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Ongeldig</h2>
                <p>Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op de <code>.form-group.dso-checkboxes</code> geplaatst te worden</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-invalid dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked="">
        <label for="input-checkbox-invalid-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2">
        <label for="input-checkbox-invalid-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3">
        <label for="input-checkbox-invalid-2">
          drie
        </label>
      </div>
      <p class="dso-message">Selecteer minimaal 2 velden</p>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-invalid --><hr>

<!-- Start: @group-checkboxes--input-checkbox-valid -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Geldig</h2>
                <p>Een ongeldige checkbox-group welke geldig is gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door <code>.dso-valid</code></p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-valid dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1">
        <label for="input-checkbox-valid-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked="">
        <label for="input-checkbox-valid-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3">
        <label for="input-checkbox-valid-2">
          drie
        </label>
      </div>
      <p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-valid --><hr>

<!-- Start: @group-checkboxes--input-checkbox-disabled -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Disabled</h2>
                <p>Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code> attribuut krijgen.</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled="" checked="">
        <label for="input-checkbox-disabled-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled="">
        <label for="input-checkbox-disabled-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled="">
        <label for="input-checkbox-disabled-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-disabled --><hr>

<!-- Start: @group-checkboxes--input-checkbox-info-button -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Infobutton</h2>
                <p>Een checkbox fieldset kan op twee plekken een info button krijgen. Naast de de vraag en per optie. Als een toelichting is opengeklapt moet er <code>.dso-open</code> op de toelichting button geplaatst worden.</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
      <button type="button" class="btn dso-field-info-button dso-open">
        <span class="sr-only">
          Toelichting
        </span>
      </button>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-0" name="input-checkbox-info-button" value="1">
        <label for="input-checkbox-info-button-0">
          een
        </label>
          <button type="button" class="btn dso-field-info-button">
            <span class="sr-only">
              Toelichting
            </span>
          </button>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-1" name="input-checkbox-info-button" value="2">
        <label for="input-checkbox-info-button-1">
          twee
        </label>
          <button type="button" class="btn dso-field-info-button dso-open">
            <span class="sr-only">
              Toelichting
            </span>
          </button>
          <div class="dso-field-info">
            <button type="button">
              <span class="sr-only">Sluiten</span>
            </button>
            <div class="dso-rich-content">
              <h4>Heading 4</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
            Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
            Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
          </p>
          
            </div>
          </div>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-2" name="input-checkbox-info-button" value="3">
        <label for="input-checkbox-info-button-2">
          drie
        </label>
      </div>
  </div>
    <div class="dso-field-info">
      <button type="button">
        <span class="sr-only">Sluiten</span>
      </button>
      <div class="dso-rich-content">
        <h4>Heading 4</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
      Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
      Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
    </p>
    
      </div>
    </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-info-button --><hr>

        <button type="submit" class="hidden">VALIDATOR_ONLY</button>
      </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<form class="form-horizontal">
        <!-- Start: @group-checkboxes--default -->
<fieldset class="form-group dso-checkboxes">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">
        <label for="input-checkbox-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2">
        <label for="input-checkbox-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3">
        <label for="input-checkbox-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
<!-- End: @group-checkboxes--default --><hr>

<!-- Start: @group-checkboxes--input-checkbox-required -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Verplicht</h2>
                <p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-checkboxes</code></p>
<p>Checkboxes hebben (net zoals radio's) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1">
        <label for="input-checkbox-required-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2">
        <label for="input-checkbox-required-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3">
        <label for="input-checkbox-required-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-required --><hr>

<!-- Start: @group-checkboxes--input-checkbox-invalid -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Ongeldig</h2>
                <p>Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op de <code>.form-group.dso-checkboxes</code> geplaatst te worden</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-invalid dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked="">
        <label for="input-checkbox-invalid-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2">
        <label for="input-checkbox-invalid-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3">
        <label for="input-checkbox-invalid-2">
          drie
        </label>
      </div>
      <p class="dso-message">Selecteer minimaal 2 velden</p>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-invalid --><hr>

<!-- Start: @group-checkboxes--input-checkbox-valid -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Geldig</h2>
                <p>Een ongeldige checkbox-group welke geldig is gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door <code>.dso-valid</code></p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-valid dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1">
        <label for="input-checkbox-valid-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked="">
        <label for="input-checkbox-valid-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3">
        <label for="input-checkbox-valid-2">
          drie
        </label>
      </div>
      <p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-valid --><hr>

<!-- Start: @group-checkboxes--input-checkbox-disabled -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Disabled</h2>
                <p>Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code> attribuut krijgen.</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled="" checked="">
        <label for="input-checkbox-disabled-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled="">
        <label for="input-checkbox-disabled-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled="">
        <label for="input-checkbox-disabled-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-disabled --><hr>

<!-- Start: @group-checkboxes--input-checkbox-info-button -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Infobutton</h2>
                <p>Een checkbox fieldset kan op twee plekken een info button krijgen. Naast de de vraag en per optie. Als een toelichting is opengeklapt moet er <code>.dso-open</code> op de toelichting button geplaatst worden.</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
      <button type="button" class="btn dso-field-info-button dso-open">
        <span class="sr-only">
          Toelichting
        </span>
      </button>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-0" name="input-checkbox-info-button" value="1">
        <label for="input-checkbox-info-button-0">
          een
        </label>
          <button type="button" class="btn dso-field-info-button">
            <span class="sr-only">
              Toelichting
            </span>
          </button>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-1" name="input-checkbox-info-button" value="2">
        <label for="input-checkbox-info-button-1">
          twee
        </label>
          <button type="button" class="btn dso-field-info-button dso-open">
            <span class="sr-only">
              Toelichting
            </span>
          </button>
          <div class="dso-field-info">
            <button type="button">
              <span class="sr-only">Sluiten</span>
            </button>
            <div class="dso-rich-content">
              <h4>Heading 4</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
            Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
            Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
          </p>
          
            </div>
          </div>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-2" name="input-checkbox-info-button" value="3">
        <label for="input-checkbox-info-button-2">
          drie
        </label>
      </div>
  </div>
    <div class="dso-field-info">
      <button type="button">
        <span class="sr-only">Sluiten</span>
      </button>
      <div class="dso-rich-content">
        <h4>Heading 4</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
      Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
      Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
    </p>
    
      </div>
    </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-info-button --><hr>

        <button type="submit" class="hidden">VALIDATOR_ONLY</button>
      </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<form class="form-horizontal">
        <!-- Start: @group-checkboxes--default -->
<fieldset class="form-group dso-checkboxes">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">
        <label for="input-checkbox-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2">
        <label for="input-checkbox-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3">
        <label for="input-checkbox-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
<!-- End: @group-checkboxes--default --><hr>

<!-- Start: @group-checkboxes--input-checkbox-required -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Verplicht</h2>
                <p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-checkboxes</code></p>
<p>Checkboxes hebben (net zoals radio's) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1">
        <label for="input-checkbox-required-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2">
        <label for="input-checkbox-required-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3">
        <label for="input-checkbox-required-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-required --><hr>

<!-- Start: @group-checkboxes--input-checkbox-invalid -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Ongeldig</h2>
                <p>Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op de <code>.form-group.dso-checkboxes</code> geplaatst te worden</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-invalid dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked="">
        <label for="input-checkbox-invalid-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2">
        <label for="input-checkbox-invalid-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3">
        <label for="input-checkbox-invalid-2">
          drie
        </label>
      </div>
      <p class="dso-message">Selecteer minimaal 2 velden</p>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-invalid --><hr>

<!-- Start: @group-checkboxes--input-checkbox-valid -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Geldig</h2>
                <p>Een ongeldige checkbox-group welke geldig is gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door <code>.dso-valid</code></p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-valid dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1">
        <label for="input-checkbox-valid-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked="">
        <label for="input-checkbox-valid-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3">
        <label for="input-checkbox-valid-2">
          drie
        </label>
      </div>
      <p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-valid --><hr>

<!-- Start: @group-checkboxes--input-checkbox-disabled -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Disabled</h2>
                <p>Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code> attribuut krijgen.</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled="" checked="">
        <label for="input-checkbox-disabled-0">
          een
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled="">
        <label for="input-checkbox-disabled-1">
          twee
        </label>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled="">
        <label for="input-checkbox-disabled-2">
          drie
        </label>
      </div>
  </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-disabled --><hr>

<!-- Start: @group-checkboxes--input-checkbox-info-button -->

        <div class="dso-example-wrapper">
          <div class="dso-example-text" aria-hidden="true">
                <h2>Infobutton</h2>
                <p>Een checkbox fieldset kan op twee plekken een info button krijgen. Naast de de vraag en per optie. Als een toelichting is opengeklapt moet er <code>.dso-open</code> op de toelichting button geplaatst worden.</p>
              </div>
          
          <div class="dso-example">
            <fieldset class="form-group dso-checkboxes dso-required">
  <legend class="dso-label-container">
    <label class="control-label">
      Maak een keuze
    </label>
      <button type="button" class="btn dso-field-info-button dso-open">
        <span class="sr-only">
          Toelichting
        </span>
      </button>
  </legend>
  <div class="dso-field-container">
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-0" name="input-checkbox-info-button" value="1">
        <label for="input-checkbox-info-button-0">
          een
        </label>
          <button type="button" class="btn dso-field-info-button">
            <span class="sr-only">
              Toelichting
            </span>
          </button>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-1" name="input-checkbox-info-button" value="2">
        <label for="input-checkbox-info-button-1">
          twee
        </label>
          <button type="button" class="btn dso-field-info-button dso-open">
            <span class="sr-only">
              Toelichting
            </span>
          </button>
          <div class="dso-field-info">
            <button type="button">
              <span class="sr-only">Sluiten</span>
            </button>
            <div class="dso-rich-content">
              <h4>Heading 4</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
            Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
            Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
          </p>
          
            </div>
          </div>
      </div>
      <div class="dso-selectable">
        <input type="checkbox" id="input-checkbox-info-button-2" name="input-checkbox-info-button" value="3">
        <label for="input-checkbox-info-button-2">
          drie
        </label>
      </div>
  </div>
    <div class="dso-field-info">
      <button type="button">
        <span class="sr-only">Sluiten</span>
      </button>
      <div class="dso-rich-content">
        <h4>Heading 4</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
      Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
      Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
    </p>
    
      </div>
    </div>
</fieldset>
          </div>
        </div>
<!-- End: @group-checkboxes--input-checkbox-info-button --><hr>

        <button type="submit" class="hidden">VALIDATOR_ONLY</button>
      </form>

Group Checkboxes

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

Lists

Table

Groups

Divers

Form