Group Select

There are no notes for this item.

<!-- Default -->
<div class="form-group dso-select">
    <div class="dso-label-container">
        <label for="input-select" class="control-label">
            Group select - Default
        </label>

    </div>
    <div class="dso-field-container">
        <select id="input-select" class="form-control">

            <optgroup label="Vlees">

                <option value="worst">Worst</option>

                <option value="salami">Salami</option>

                <option value="geit">Geit</option>

            </optgroup>

            <optgroup label="Vis">

                <option value="zalm">Zalm</option>

                <option value="makreel">Makreel</option>

            </optgroup>

        </select>

    </div>

</div>
<!-- Input Select Multiple -->
<div class="form-group dso-select dso-multiple">
    <div class="dso-label-container">
        <label for="input-select-multiple" class="control-label">
            Group select - Multiple
        </label>

    </div>
    <div class="dso-field-container">
        <select id="input-select-multiple" class="form-control" aria-describedby="helpTextId_input-select-multiple" multiple>

            <optgroup label="Vlees">

                <option value="worst">Worst</option>

                <option value="salami">Salami</option>

                <option value="geit">Geit</option>

            </optgroup>

            <optgroup label="Vis">

                <option value="zalm">Zalm</option>

                <option value="makreel">Makreel</option>

            </optgroup>

        </select>

        <p class="dso-help-block" id="helpTextId_input-select-multiple">Maak een keuze tussen vlees of vis</p>

    </div>

</div>
<!-- Input Select Invalid -->
<div class="form-group dso-select dso-invalid dso-required">
    <div class="dso-label-container">
        <label for="input-select-invalid" class="control-label">
            Group select - Invalid
        </label>

    </div>
    <div class="dso-field-container">
        <select id="input-select-invalid" class="form-control" aria-describedby="helpTextId_input-select-invalid" required aria-invalid="true">

            <optgroup label="Vlees">

                <option value="worst">Worst</option>

                <option value="salami">Salami</option>

                <option value="geit">Geit</option>

            </optgroup>

            <optgroup label="Vis">

                <option value="zalm">Zalm</option>

                <option value="makreel">Makreel</option>

            </optgroup>

        </select>

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

        <p class="dso-help-block" id="helpTextId_input-select-invalid">Maak een keuze tussen vlees of vis</p>

    </div>

</div>
<!-- Input Select Valid -->
<div class="form-group dso-select dso-valid dso-required">
    <div class="dso-label-container">
        <label for="input-select-valid" class="control-label">
            Group select - Valid
        </label>

    </div>
    <div class="dso-field-container">
        <select id="input-select-valid" class="form-control" aria-describedby="helpTextId_input-select-valid" required>

            <optgroup label="Vlees">

                <option value="worst">Worst</option>

                <option value="salami">Salami</option>

                <option value="geit">Geit</option>

            </optgroup>

            <optgroup label="Vis">

                <option value="zalm">Zalm</option>

                <option value="makreel">Makreel</option>

            </optgroup>

        </select>

        <p class="dso-help-block" id="helpTextId_input-select-valid">Maak een keuze tussen vlees of vis</p>

    </div>

</div>
<!-- Input Select Disabled -->
<div class="form-group dso-select dso-required">
    <div class="dso-label-container">
        <label for="input-select-disabled" class="control-label">
            Group select - Disabled
        </label>

    </div>
    <div class="dso-field-container">
        <select id="input-select-disabled" class="form-control" disabled required>

            <optgroup label="Vlees">

                <option value="worst">Worst</option>

                <option value="salami">Salami</option>

                <option value="geit">Geit</option>

            </optgroup>

            <optgroup label="Vis">

                <option value="zalm">Zalm</option>

                <option value="makreel">Makreel</option>

            </optgroup>

        </select>

    </div>

</div>
<!-- Input Select Infobutton Open -->
<div class="form-group dso-select dso-required">
    <div class="dso-label-container">
        <label for="input-select-multiple-open" class="control-label">
            Group select - Default
        </label>

        <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: "Kies uw beleg"</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">
        <select id="input-select-multiple-open" class="form-control" required>

            <optgroup label="Vlees">

                <option value="worst">Worst</option>

                <option value="salami">Salami</option>

                <option value="geit">Geit</option>

            </optgroup>

            <optgroup label="Vis">

                <option value="zalm">Zalm</option>

                <option value="makreel">Makreel</option>

            </optgroup>

        </select>

    </div>

    <div class="dso-info">

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

        <div class="dso-rich-content">
            <h4>Toelichting bij vraag: "Kies uw beleg" - BINNENKORT 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>

</div>
<!-- Input Select Infobutton Open -->
<div class="form-group dso-select">
    <div class="dso-label-container">
        <label for="input-select-items-only" class="control-label">
            Group select - no opt-group
        </label>

    </div>
    <div class="dso-field-container">
        <select id="input-select-items-only" class="form-control">

            <option value="be">Belgiรซ</option>

            <option value="nl">Nederland</option>

            <option value="lux">Luxemburg</option>

        </select>

    </div>

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

{% macro selectOption(value, label, selected) %}
  <option value="{{ value }}"{% if selected %} selected{% endif %}>{{ label }}</option>
{% endmacro %}

<div {{ className('form-group dso-select', [multiple, 'dso-multiple'], [state, 'dso-' + state], [required, 'dso-required']) }}>
  <div class="dso-label-container">
    <label for="{{ localId }}" class="control-label">
      {{ label }}
    </label>
    {% if infoText %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    <select id="{{ localId }}" class="form-control"
      {% if helpText %} aria-describedby="helpTextId_{{ localId }}"{% endif %}
      {% if multiple %} multiple{% endif %}
      {% if disabled %} disabled{% endif %}
      {% if checked %} checked{% endif %}
      {% if required %} required{% endif %}
      {% if state == "invalid" %} aria-invalid="true"{% endif %}>
      {% for option in options %}
        {% if option.optionType %}
          <optgroup label="{{ option.optionType }}"{% if option.disabled %} disabled{% endif %}>
            {% for item in option.items %}
              {{ selectOption(item.value, item.label, item.selected) }}
            {% endfor %}
          </optgroup>
        {% else %}
          {{ selectOption(option.value, option.label, option.selected) }}
        {% endif %}
      {% endfor %}
    </select>
    {% if errorText %}
      {% render '@error-block', {errorText: errorText} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: localId} %}
    {% endif %}
  </div>
  {% if infoOpen %}
    {% render '@info', {infoText: infoTextDeprecated} %}
  {% endif %}
</div>
/* Default */
__title: default
id: input-select
label: Group select - Default
options:
  - optionType: Vlees
    items:
      - value: worst
        label: Worst
      - value: salami
        label: Salami
      - value: geit
        label: Geit
  - optionType: Vis
    items:
      - value: zalm
        label: Zalm
      - value: makreel
        label: Makreel
/* Input Select Multiple */
__title: multiple
id: input-select-multiple
label: Group select - Multiple
options:
  - optionType: Vlees
    items:
      - value: worst
        label: Worst
      - value: salami
        label: Salami
      - value: geit
        label: Geit
  - optionType: Vis
    items:
      - value: zalm
        label: Zalm
      - value: makreel
        label: Makreel
__explanation:
  - >-
    Indien een multiple select gewenst is, dient er een
    <code>.dso-multiple</code> class gezet te worden op de div met de class
    <code>.dso-select</code>.
multiple: true
helpText: Maak een keuze tussen vlees of vis
/* Input Select Invalid */
__title: invalid
id: input-select-invalid
label: Group select - Invalid
options:
  - optionType: Vlees
    items:
      - value: worst
        label: Worst
      - value: salami
        label: Salami
      - value: geit
        label: Geit
  - optionType: Vis
    items:
      - value: zalm
        label: Zalm
      - value: makreel
        label: Makreel
__explanation:
  - >-
    Indien een select ongeldig is, dient er een <code>.dso-invalid</code> class
    gezet te worden op de div met de class <code>.dso-select</code>.
required: true
helpText: Maak een keuze tussen vlees of vis
state: invalid
errorText: Maak een keuze.
/* Input Select Valid */
__title: valid
id: input-select-valid
label: Group select - Valid
options:
  - optionType: Vlees
    items:
      - value: worst
        label: Worst
      - value: salami
        label: Salami
      - value: geit
        label: Geit
  - optionType: Vis
    items:
      - value: zalm
        label: Zalm
      - value: makreel
        label: Makreel
__explanation:
  - >-
    Indien een select ongeldig was en valide wordt gemaakt, dient de
    <code>.dso-invalid</code> class vervangen te worden door de class
    <code>.dso-valid</code>.
required: true
state: valid
helpText: Maak een keuze tussen vlees of vis
/* Input Select Disabled */
__title: disabled
id: input-select-disabled
label: Group select - Disabled
options:
  - optionType: Vlees
    items:
      - value: worst
        label: Worst
      - value: salami
        label: Salami
      - value: geit
        label: Geit
  - optionType: Vis
    items:
      - value: zalm
        label: Zalm
      - value: makreel
        label: Makreel
required: true
disabled: true
/* Input Select Infobutton Open */
__title: infobutton uitgeklapt
id: input-select-multiple-open
label: Group select - Default
options:
  - optionType: Vlees
    items:
      - value: worst
        label: Worst
      - value: salami
        label: Salami
      - value: geit
        label: Geit
  - optionType: Vis
    items:
      - value: zalm
        label: Zalm
      - value: makreel
        label: Makreel
__explanation:
  - Toelichting uitgeklapt
required: true
infoOpen: true
infoButtonLabel: Toelichting bij vraag
infoText: |
  <h4>Toelichting bij vraag: "Kies uw beleg"</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: "Kies uw beleg" - BINNENKORT 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 Select Infobutton Open */
__title: zonder `optgroup`.
id: input-select-items-only
label: Group select - no opt-group
options:
  - value: be
    label: Belgiรซ
  - value: nl
    label: Nederland
  - value: lux
    label: Luxemburg