DSO Component Library

Vertical Group Select 

<div class="form-group select">
    <label for="select_voorbeeld"></label>
    <select id="select_voorbeeld" class="form-control">
      <optgroup label="Europees">
          <option value="alfa">Alfa Romeo</option>
          <option value="fiat">Fiat</option>
          <option value="marcedes" selected>Mercedes</option>
          <option value="volkswagen">Volkswagen</option>
      </optgroup>
  </select>
    <p class="help-block" id="helpTextId_select_voorbeeld">Selecteer een waarde</p>
</div>
 
<div class="form-group select{{#if multiple }} multiple{{/if}}">
  <label for="{{ id }}">{{ label }}</label>
  <select id="{{ id }}" class="form-control"
    {{{ifattr 'disabled' disabled }}}
    {{{ifattr 'readonly' readonly }}}
    {{{ifattr 'multiple' multiple }}}>
    {{#each options }}
      <optgroup label="{{ optionType }}"{{{ifattr ' disabled' disabled }}}>
        {{#each items }}
          <option value="{{ value }}"{{{ifattr ' selected' selected }}}>{{ label }}</option>
        {{/each}}
      </optgroup>
    {{/each}}
  </select>
  {{#if helpText }}
    {{> '@help-block' }}
  {{/if}}
</div>
 
id: select_voorbeeld
helpText: Selecteer een waarde
options:
  - optionType: Europees
    items:
      - value: alfa
        label: Alfa Romeo
      - value: fiat
        label: Fiat
      - value: marcedes
        label: Mercedes
        selected: true
      - value: volkswagen
        label: Volkswagen

Een help block staat altijd direct in de .form-group.