DSO Toolkit | Component Library

Group Checkboxes: 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-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-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-info-button dso-open">
                <span class="sr-only">
                    Toelichting
                </span>
            </button>
            <div class="dso-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-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 }}
      {{> '@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 }}
          {{> '@info-button' }}
        {{/if}}
        {{#if infoOpen }}
          {{> '@info' }}
        {{/if}}
      </div>
    {{/each}}
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
  {{#if infoOpen }}
    {{> '@info' }}
  {{/if}}
</fieldset>
 
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>

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