DSO Toolkit | Component Library

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

There are no notes for this item.