Selectable

Component preview

<!-- Default -->
<div class="dso-selectable">
    <input type="radio" id="selectable--default" name="selectable--default">
    <label for="selectable--default">
        Selecteer mij
    </label>

</div>

<!-- Radio Info Closed -->
<div class="dso-selectable">
    <input type="radio" id="radio-info-closed" name="radio-info-closed">
    <label for="radio-info-closed">
        Selecteer mij
    </label>

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

</div>

<!-- Radio Info -->
<div class="dso-selectable">
    <input type="radio" id="radio-info-open" name="radio-info-open">
    <label for="radio-info-open">
        Selecteer mij
    </label>

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

    <div class="dso-info">

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

        <div class="dso-rich-content">
            <p>Toelichting bij optie</p>

        </div>
    </div>

</div>

<!-- Radio Info Closed -->
<div class="dso-selectable">
    <input type="radio" id="radio-info-static" name="radio-info-static" aria-describedby="infoTextId_radio-info-static">
    <label for="radio-info-static">
        Selecteer mij
    </label>

    <div class="dso-info" id="infoTextId_radio-info-static">

        <div class="dso-rich-content">
            <p>Deze toelichting kan niet worden gesloten</p>

        </div>
    </div>

</div>

<!-- Checkbox -->
<div class="dso-selectable">
    <input type="checkbox" id="checkbox-default" name="checkbox-default">
    <label for="checkbox-default">
        Selecteer mij
    </label>

</div>

<!-- Checkbox Info Closed -->
<div class="dso-selectable">
    <input type="checkbox" id="checkbox-info-closed" name="checkbox-info-closed">
    <label for="checkbox-info-closed">
        Selecteer mij
    </label>

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

</div>

<!-- Checkbox Info -->
<div class="dso-selectable">
    <input type="checkbox" id="checkbox-info-open" name="checkbox-info-open">
    <label for="checkbox-info-open">
        Selecteer mij
    </label>

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

    <div class="dso-info">

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

        <div class="dso-rich-content">
            <p>Toelichting bij optie</p>

        </div>
    </div>

</div>

<!-- Checkbox Info Closed -->
<div class="dso-selectable">
    <input type="checkbox" id="checkbox-info-static" name="checkbox-info-static" aria-describedby="infoTextId_checkbox-info-static">
    <label for="checkbox-info-static">
        Selecteer mij
    </label>

    <div class="dso-info" id="infoTextId_checkbox-info-static">

        <div class="dso-rich-content">
            <p>Deze toelichting kan niet worden gesloten</p>

        </div>
    </div>

</div>

<!-- Checkbox Nested -->
<div class="dso-selectable">
    <input type="checkbox" id="checkbox-nested" name="checkbox-nested">
    <label for="checkbox-nested">
        Optie op hoofdniveau
    </label>

    <ul class="dso-selectable-options">
        <li>

            <div class="dso-selectable">
                <input type="checkbox" id="checkbox-sub-1-1" name="checkbox-sub-1" value="1.1" checked>
                <label for="checkbox-sub-1-1">
                    Optie op niveau 1 - keuze 1
                </label>

                <button type="button" class="dso-info-button dso-open" aria-expanded="true">
                    <span class="sr-only">Toelichting bij deze optie</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: "Optie op niveau 1 - keuze 1"</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.
                        </p>

                    </div>
                </div>

                <ul class="dso-selectable-options">
                    <li>

                        <div class="dso-selectable">
                            <input type="checkbox" id="checkbox-sub-1-1-1" name="checkbox-sub-1-1" value="1.1.1">
                            <label for="checkbox-sub-1-1-1">
                                Optie op niveau 1.1 - keuze 1
                            </label>

                        </div>

                    </li>

                    <li>

                        <div class="dso-selectable">
                            <input type="checkbox" id="checkbox-sub-1-1-2" name="checkbox-sub-1-1" value="1.1.2">
                            <label for="checkbox-sub-1-1-2">
                                Optie op niveau 1.1 - keuze 2
                            </label>

                        </div>

                    </li>

                </ul>

            </div>

        </li>

        <li>

            <div class="dso-selectable">
                <input type="checkbox" id="checkbox-sub-1-2" name="checkbox-sub-1" value="1.2">
                <label for="checkbox-sub-1-2">
                    Optie op niveau 1 - keuze 2
                </label>

                <ul class="dso-selectable-options">
                    <li>

                        <div class="dso-selectable">
                            <input type="checkbox" id="checkbox-sub-1-2-1" name="checkbox-sub-1-2" value="1.2.1">
                            <label for="checkbox-sub-1-2-1">
                                Optie op niveau 1.2 - keuze 1
                            </label>

                        </div>

                    </li>

                    <li>

                        <div class="dso-selectable">
                            <input type="checkbox" id="checkbox-sub-1-2-2" name="checkbox-sub-1-2" value="1.2.2">
                            <label for="checkbox-sub-1-2-2">
                                Optie op niveau 1.2 - keuze 2
                            </label>

                        </div>

                    </li>

                </ul>

            </div>

        </li>

        <li>

            <div class="dso-selectable">
                <input type="checkbox" id="checkbox-sub-1-3" name="checkbox-sub-1" value="1.3">
                <label for="checkbox-sub-1-3">
                    Optie op niveau 1 - keuze 3
                </label>

                <ul class="dso-selectable-options">
                    <li>

                        <div class="dso-selectable">
                            <input type="radio" id="radio-sub-1-3-1" name="radio-sub-1-3" value="1.3.1">
                            <label for="radio-sub-1-3-1">
                                Optie op niveau 1.3 - keuze 1
                            </label>

                        </div>

                    </li>

                    <li>

                        <div class="dso-selectable">
                            <input type="radio" id="radio-sub-1-3-2" name="radio-sub-1-3" value="1.3.2">
                            <label for="radio-sub-1-3-2">
                                Optie op niveau 1.3 - keuze 2
                            </label>

                        </div>

                    </li>

                </ul>

            </div>

        </li>

        <li>

            <div class="dso-selectable">
                <input type="checkbox" id="checkbox-sub-1-4" name="checkbox-sub-1" value="1.4">
                <label for="checkbox-sub-1-4">
                    Optie op niveau 1 - keuze 4
                </label>

            </div>

        </li>

    </ul>

</div>

{% set errorTextId = 'errorTextId_' + (id or _self.handle) %}
{% set helpTextId = 'helpTextId_' + (id or _self.handle) %}
{% set infoTextId = 'infoTextId_' + (id or _self.handle) %}

{% if infoText and infoStatic %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + infoTextId %}
{% endif %}

<div {{ className('dso-selectable', modifiers) }}>
  <input
    type="{{ type }}"
    id="{{ id or _self.handle }}"
    name="{{ name or id or _self.handle }}"
    {{ attributes(
      [value, 'value', value],
      [invalid, 'aria-invalid', invalid],
      [ariaDescribedBy, 'aria-describedby', ariaDescribedBy],
      [disabled, 'disabled'],
      [required, 'required'],
      [checked, 'checked']
    ) }}
  >
  <label for="{{ id or _self.handle }}">
    {{ label | safe }}
  </label>
  {% if infoText and not infoStatic %}
    {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
  {% endif %}
  {% if infoText and (infoOpen or infoStatic) %}
    {% render '@info', {infoText: infoText, static: infoStatic, id: infoTextId} %}
  {% endif %}
  {% if nestedOptions %}
    <ul class="dso-selectable-options">
      {%- for option in nestedOptions %}
        <li>
          {% render '@selectable', option %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

/* Default */
__title: Radiobutton - Default
type: radio
label: Selecteer mij

/* Radio Info Closed */
__title: Radiobutton - Info Closed
type: radio
label: Selecteer mij
id: radio-info-closed
infoText: >
  <p>Deze informatie is pas zichtbaar als de informatie-button wordt
  geactiveerd</p>

/* Radio Info */
__title: Radiobutton - Info Open
type: radio
label: Selecteer mij
id: radio-info-open
infoOpen: true
infoText: |
  <p>Toelichting bij optie</p>

/* Radio Info Closed */
__title: Radiobutton - Info Static
type: radio
label: Selecteer mij
id: radio-info-static
infoStatic: true
infoText: |
  <p>Deze toelichting kan niet worden gesloten</p>

/* Checkbox */
__title: Checkbox - Default
type: checkbox
label: Selecteer mij
id: checkbox-default

/* Checkbox Info Closed */
__title: Checkbox - Info Closed
type: checkbox
label: Selecteer mij
id: checkbox-info-closed
infoText: >
  <p>Deze informatie is pas zichtbaar als de informatie-button wordt
  geactiveerd</p>

/* Checkbox Info */
__title: Checkbox - Info Open
type: checkbox
label: Selecteer mij
id: checkbox-info-open
infoOpen: true
infoText: |
  <p>Toelichting bij optie</p>

/* Checkbox Info Closed */
__title: Checkbox - Info Static
type: checkbox
label: Selecteer mij
id: checkbox-info-static
infoStatic: true
infoText: |
  <p>Deze toelichting kan niet worden gesloten</p>

/* Checkbox Nested */
__title: Checkbox - Nested
type: checkbox
label: Optie op hoofdniveau
id: checkbox-nested
nestedOptions:
  - value: 1.1
    type: checkbox
    label: Optie op niveau 1 - keuze 1
    id: checkbox-sub-1-1
    name: checkbox-sub-1
    checked: true
    infoOpen: true
    infoText: |
      <h4>Toelichting bij antwoord: "Optie op niveau 1 - keuze 1"</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.
      </p>
    nestedOptions:
      - value: 1.1.1
        type: checkbox
        label: Optie op niveau 1.1 - keuze 1
        id: checkbox-sub-1-1-1
        name: checkbox-sub-1-1
      - value: 1.1.2
        type: checkbox
        label: Optie op niveau 1.1 - keuze 2
        id: checkbox-sub-1-1-2
        name: checkbox-sub-1-1
  - value: 1.2
    type: checkbox
    label: Optie op niveau 1 - keuze 2
    id: checkbox-sub-1-2
    name: checkbox-sub-1
    nestedOptions:
      - value: 1.2.1
        type: checkbox
        label: Optie op niveau 1.2 - keuze 1
        id: checkbox-sub-1-2-1
        name: checkbox-sub-1-2
      - value: 1.2.2
        type: checkbox
        label: Optie op niveau 1.2 - keuze 2
        id: checkbox-sub-1-2-2
        name: checkbox-sub-1-2
  - value: 1.3
    type: checkbox
    label: Optie op niveau 1 - keuze 3
    id: checkbox-sub-1-3
    name: checkbox-sub-1
    nestedOptions:
      - value: 1.3.1
        type: radio
        label: Optie op niveau 1.3 - keuze 1
        id: radio-sub-1-3-1
        name: radio-sub-1-3
      - value: 1.3.2
        type: radio
        label: Optie op niveau 1.3 - keuze 2
        id: radio-sub-1-3-2
        name: radio-sub-1-3
  - value: 1.4
    type: checkbox
    label: Optie op niveau 1 - keuze 4
    id: checkbox-sub-1-4
    name: checkbox-sub-1