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.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<option value="alfa">Alfa Romeo</option>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Default

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<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>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<form> <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> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<form> <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> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<form> <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> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<form> <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> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>