DSO Toolkit | Component Library

Group Select 

<!-- Default -->
<div class="form-group dso-select">
    <div class="dso-label-container">
        <label for="input-select" class="control-label">
            Kies uw beleg
        </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">
            Kies uw beleg
        </label>
    </div>
    <div class="dso-field-container">
        <select id="input-select-multiple" class="form-control" 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">
            Kies uw beleg
        </label>
    </div>
    <div class="dso-field-container">
        <select id="input-select-invalid" 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>
        <p class="dso-message">Dit veld is verplicht</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">
            Kies uw beleg
        </label>
    </div>
    <div class="dso-field-container">
        <select id="input-select-valid" 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>
        <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">
            Kies uw beleg
        </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">
            Kies uw beleg
        </label>
        <button type="button" class="btn dso-info-button dso-open">
            <span class="sr-only">
                Toelichting
            </span>
        </button>
    </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>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="form-group dso-select{{#if multiple }} dso-multiple{{/if}}{{#if state}} dso-{{ state }}{{/if}}{{#if required }} dso-required{{/if}}">
  <div class="dso-label-container">
    <label for="{{ id }}" class="control-label">
      {{ label }}
    </label>
    {{#if infoText }}
      {{> '@info-button' }}
    {{/if}}
  </div>
  <div class="dso-field-container">
    <select id="{{ id }}" class="form-control"
      {{{ifattr 'disabled' disabled }}}
      {{{ifattr 'multiple' multiple }}}
      {{{ifattr 'required' required }}}>
      {{#each options }}
        <optgroup label="{{ optionType }}"{{{ifattr ' disabled' disabled }}}>
          {{#each items }}
            <option value="{{ value }}"{{{ifattr ' selected' selected }}}>{{ label }}</option>
          {{/each}}
        </optgroup>
      {{/each}}
    </select>
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
  {{#if infoOpen }}
    {{> '@info' }}
  {{/if}}
</div>
 
/* Default */
id: input-select
label: Kies uw beleg
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 */
id: input-select-multiple
label: Kies uw beleg
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
__title: Multiple
__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 */
id: input-select-invalid
label: Kies uw beleg
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
__title: Ongeldig
__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: Dit veld is verplicht



/* Input Select Valid */
id: input-select-valid
label: Kies uw beleg
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
__title: Geldig
__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 */
id: input-select-disabled
label: Kies uw beleg
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
__title: Disabled
required: true
disabled: true



/* Input Select Infobutton Open */
id: input-select-multiple-open
label: Kies uw beleg
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
__title: Infobutton uitgeklapt
__explanation:
  - Toelichting uitgeklapt
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>

There are no notes for this item.