DSO Component Library

# Group Select: Input Select Disabled

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

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

`
`

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

`
`

    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

`

- Handle: @group-select--input-select-disabled
- Variants (5): Default , Input Select Multiple , Input Select Invalid , Input Select Valid , Input Select Disabled
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\01-groups\group-select.hbs
- References (2): @error-block, @help-block

There are no notes for this item.

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

`<label for="input-select" class="control-label"> Kies uw beleg </label>`

### WARNING: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Select.Value

This select element does not have an initially selected option. Depending on your HTML version, the value exposed to an accessibility API may be undefined.

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

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

Check that the title element describes the document.

`<title>Group Select`

### 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="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>`

### 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 class="form-horizontal"> <!-- Start: @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> <!-- End: @group-select--default --><hr> <!-- Start: @group-select--input-select-multiple --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Multiple</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-select--input-select-multiple --><hr> <!-- Start: @group-select--input-select-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-select--input-select-invalid --><hr> <!-- Start: @group-select--input-select-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-select--input-select-valid --><hr> <!-- Start: @group-select--input-select-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-select--input-select-disabled --><hr> <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 class="form-horizontal"> <!-- Start: @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> <!-- End: @group-select--default --><hr> <!-- Start: @group-select--input-select-multiple --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Multiple</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-select--input-select-multiple --><hr> <!-- Start: @group-select--input-select-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-select--input-select-invalid --><hr> <!-- Start: @group-select--input-select-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-select--input-select-valid --><hr> <!-- Start: @group-select--input-select-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-select--input-select-disabled --><hr> <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 class="form-horizontal"> <!-- Start: @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> <!-- End: @group-select--default --><hr> <!-- Start: @group-select--input-select-multiple --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Multiple</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-select--input-select-multiple --><hr> <!-- Start: @group-select--input-select-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-select--input-select-invalid --><hr> <!-- Start: @group-select--input-select-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-select--input-select-valid --><hr> <!-- Start: @group-select--input-select-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-select--input-select-disabled --><hr> <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 class="form-horizontal"> <!-- Start: @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> <!-- End: @group-select--default --><hr> <!-- Start: @group-select--input-select-multiple --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Multiple</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-select--input-select-multiple --><hr> <!-- Start: @group-select--input-select-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-select--input-select-invalid --><hr> <!-- Start: @group-select--input-select-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-select--input-select-valid --><hr> <!-- Start: @group-select--input-select-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-select--input-select-disabled --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`