Group Checkboxes

Component preview opent in nieuw tabblad

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

<!-- Default -->
<fieldset class="form-group dso-checkboxes">
    <legend class="sr-only">Group checkboxes - Default</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Group checkboxes - Default
        </span>

    </div>
    <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="sr-only">Group checkboxes - Required</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Group checkboxes - Required
        </span>

    </div>
    <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="sr-only">Group checkboxes - Invalid</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Group checkboxes - Invalid
        </span>

    </div>
    <div class="dso-field-container">

        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" aria-invalid="true">
            <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" aria-invalid="true">
            <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" aria-invalid="true">
            <label for="input-checkbox-invalid-2">
                drie
            </label>

        </div>

        <p class="dso-message">Maak een keuze</p>

    </div>

</fieldset>
<!-- Input Checkbox Valid -->
<fieldset class="form-group dso-checkboxes dso-valid dso-required">
    <legend class="sr-only">Group checkboxes - Valid</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Group checkboxes - Valid
        </span>

    </div>
    <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="sr-only">Group checkboxes - Disabled</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Group checkboxes - Disabled
        </span>

    </div>
    <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="sr-only">Group checkboxes - Default</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Group checkboxes - Default
        </span>

        <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
            <span class="sr-only">Toelichting bij vraag</span>
        </button>

        <div class="dso-info">

            <button type="button">
                <span class="sr-only">Sluiten</span>
            </button>

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Maak een keuze"</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-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" aria-expanded="false">
                <span class="sr-only">Toelichting bij antwoord</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" aria-expanded="true">
                <span class="sr-only">Toelichting bij antwoord</span>
            </button>

            <div class="dso-info">

                <button type="button">
                    <span class="sr-only">Sluiten</span>
                </button>

                <div class="dso-rich-content">
                    <h4>Toelichting bij antwoord: "twee"</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>Toelichting bij vraag: "Maak een keuze" [DEPRECATED]</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>
<!-- Input Checkbox Static Info -->
<fieldset class="form-group dso-checkboxes dso-required">
    <legend class="sr-only">Group checkboxes - Default</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Group checkboxes - Default
        </span>

        <div class="dso-info">

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Maak een keuze"</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-field-container">

        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-static-info-0" name="input-checkbox-static-info" value="1">
            <label for="input-checkbox-static-info-0">
                een
            </label>

            <button type="button" class="btn dso-info-button" aria-expanded="false">
                <span class="sr-only">Toelichting bij antwoord</span>
            </button>

        </div>

        <div class="dso-selectable">
            <input type="checkbox" id="input-checkbox-static-info-1" name="input-checkbox-static-info" value="2">
            <label for="input-checkbox-static-info-1">
                twee
            </label>

            <div class="dso-info">

                <div class="dso-rich-content">
                    <h4>Toelichting bij antwoord: "twee"</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-static-info-2" name="input-checkbox-static-info" value="3">
            <label for="input-checkbox-static-info-2">
                drie
            </label>

        </div>

    </div>

</fieldset>
{% set localId = generateLocalId(prefix, id ) %}

<fieldset {{ className('form-group', 'dso-checkboxes', [state, 'dso-' + state], [required, 'dso-required']) }}>
  <legend class="sr-only">{{ label }}</legend>
  <div class="dso-label-container">
    <span class="control-label" aria-hidden="true">
      {{ label }}
    </span>
    {% if infoText and not static %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText, static: static} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    {% for option in options %}
      <div class="dso-selectable">
        <input type="checkbox" id="{{ localId }}-{{ loop.index0 }}" name="{{ id }}" value="{{ option.value }}"
          {% if option.disabled %} disabled{% endif %}
          {% if option.checked %} checked{% endif %}
          {% if option.required %} required{% endif %}
          {% if state == "invalid" %} aria-invalid="true"{% endif %}>
        <label for="{{ localId }}-{{ loop.index0 }}">
          {{ option.label }}
        </label>
        {% if option.infoText and not option.static %}
          {% render '@info-button', {infoOpen: option.infoOpen, infoButtonLabel: option.infoButtonLabel} %}
        {% endif %}
        {% if option.infoOpen %}
          {% render '@info', {infoText: option.infoText, static: option.static} %}
        {% endif %}
      </div>
    {% endfor %}
    {% if errorText %}
      {% render '@error-block', {errorText: errorText} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: localId} %}
    {% endif %}
  </div>
  {% if infoOpen and infoTextDeprecated %}
    {% render '@info', {infoText: infoTextDeprecated} %}
  {% endif %}
</fieldset>
/* Default */
__title: default
id: input-checkbox
label: Group checkboxes - Default
options:
  - value: 1
    label: een
  - value: 2
    label: twee
  - value: 3
    label: drie
/* Input Checkbox Required */
__title: required
id: input-checkbox-required
label: Group checkboxes - Required
options:
  - value: 1
    label: een
  - value: 2
    label: twee
  - value: 3
    label: drie
__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 */
__title: invalid
id: input-checkbox-invalid
label: Group checkboxes - Invalid
options:
  - value: 1
    label: een
  - value: 2
    label: twee
  - value: 3
    label: drie
__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: Maak een keuze
/* Input Checkbox Valid */
__title: valid
id: input-checkbox-valid
label: Group checkboxes - Valid
options:
  - value: 1
    label: een
  - value: 2
    label: twee
    checked: true
  - value: 3
    label: drie
__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 */
__title: Disabled
id: input-checkbox-disabled
label: Group checkboxes - Disabled
options:
  - value: 1
    label: een
    disabled: true
    checked: true
  - value: 2
    label: twee
    disabled: true
  - value: 3
    label: drie
    disabled: true
__explanation: >-
  Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code>
  attribuut krijgen.
required: true
/* Input Checkbox Info Button */
__title: Infobutton
id: input-checkbox-info-button
label: Group checkboxes - Default
options:
  - value: 1
    label: een
    infoOpen: false
    infoButtonLabel: Toelichting bij antwoord
    infoText: |
      Closed
  - value: 2
    label: twee
    infoOpen: true
    infoButtonLabel: Toelichting bij antwoord
    infoText: |
      <h4>Toelichting bij antwoord: "twee"</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
__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
infoButtonLabel: Toelichting bij vraag
infoText: |
  <h4>Toelichting bij vraag: "Maak een keuze"</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>
infoTextDeprecated: |
  <h4>Toelichting bij vraag: "Maak een keuze" [DEPRECATED]</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>
/* Input Checkbox Static Info */
__title: Vaste toelichting
id: input-checkbox-static-info
label: Group checkboxes - Default
options:
  - value: 1
    label: een
    infoOpen: false
    infoButtonLabel: Toelichting bij antwoord
    infoText: |
      Closed
  - value: 2
    label: twee
    infoOpen: true
    infoText: |
      <h4>Toelichting bij antwoord: "twee"</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>
    static: true
  - value: 3
    label: drie
__explanation:
  - >-
    Een checkbox fieldset kan ook een vaste toelichting 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>Toelichting bij vraag: "Maak een keuze"</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>
static: true