Select

Component preview opent in nieuw tabblad

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">
            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">
            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">
            Select - Invalid
        </label>

    </div>
    <div class="dso-field-container">
        <select id="input-select-invalid" class="form-control" aria-describedby="errorTextId_input-select-invalid 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" id="errorTextId_input-select-invalid">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">
            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">
            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">
            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>
<!-- Input Select Multiple Static -->
<div class="form-group dso-select dso-required">
    <div class="dso-label-container">
        <label for="input-select-multiple-static" class="control-label">
            Select - Default
        </label>

        <div class="dso-info" id="infoTextId_input-select-multiple-static">

            <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-static" class="form-control" aria-describedby="infoTextId_input-select-multiple-static" 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 Items Only -->
<div class="form-group dso-select">
    <div class="dso-label-container">
        <label for="input-select-items-only" class="control-label">
            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>
<!-- Input Select Allmessages -->
<div class="form-group dso-select dso-invalid dso-required">
    <div class="dso-label-container">
        <label for="input-select-allmessages" class="control-label">
            Select - Alle meldingen
        </label>

        <div class="dso-info" id="infoTextId_input-select-allmessages">

            <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-allmessages" class="form-control" aria-describedby="errorTextId_input-select-allmessages helpTextId_input-select-allmessages infoTextId_input-select-allmessages" 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" id="errorTextId_input-select-allmessages">Maak een keuze.</p>

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

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

{% set errorTextId = 'errorTextId_' + localId %}
{% set helpTextId = 'helpTextId_' + localId %}
{% set infoTextId = 'infoTextId_' + localId %}

{% if errorText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + errorTextId %}
{% endif %}
{% if helpText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + helpTextId %}
{% endif %}
{% if infoText and static %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + infoTextId %}
{% endif %}

{% 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 and not static %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText, static: static, id: infoTextId} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    <select id="{{ localId }}" class="form-control"
      {{ attributes([ariaDescribedBy, 'aria-describedby', ariaDescribedBy]) }}
      {% 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, id: errorTextId} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: helpTextId} %}
    {% endif %}
  </div>
</div>
/* Default */
__title: default
id: input-select
label: 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: 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: 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: 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: 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: Toelichting uitgeklapt
id: input-select-multiple-open
label: 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 door infobutton
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>
/* Input Select Multiple Static */
__title: Vaste toelichting
id: input-select-multiple-static
label: 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
required: true
infoOpen: true
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>
static: true
/* Input Select Items Only */
__title: zonder `optgroup`.
id: input-select-items-only
label: Select - no opt-group
options:
  - value: be
    label: Belgiรซ
  - value: nl
    label: Nederland
  - value: lux
    label: Luxemburg
/* Input Select Allmessages */
__title: Alle meldingen
id: input-select-allmessages
label: Select - Alle meldingen
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: >-
  Naar de meldingen wordt verwezen met een <code>aria-describedby</code>
  attribuut vanuit de <code>select</code>.
required: true
state: invalid
errorText: Maak een keuze.
helpText: Maak een keuze tussen vlees of vis
infoOpen: true
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>
static: true