DSO Toolkit | Component Library

Group Select: 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>
 
<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>
 
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

There are no notes for this item.