DSO Component Library

# DSO select

Ready

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

`

    <!-- Radio -->
    <div class="dso-select single">
        <fieldset>
            <legend>Waar wordt de dakkapel gebouwd?</legend>
            <div class="option">
                <input type="radio" id="radio_dakkapel_positie_0" name="dakkapel_positie" value="1" />
                <label for="radio_dakkapel_positie_0">
                Zijkant
              </label>
            </div>
            <div class="option">
                <input type="radio" id="radio_dakkapel_positie_1" name="dakkapel_positie" value="2" />
                <label for="radio_dakkapel_positie_1">
                Voorkant
              </label>
            </div>
            <div class="option">
                <input type="radio" id="radio_dakkapel_positie_2" name="dakkapel_positie" value="3" />
                <label for="radio_dakkapel_positie_2">
                Achterkant
              </label>
            </div>
            <div class="option">
                <input type="radio" id="radio_dakkapel_positie_3" name="dakkapel_positie" value="4" disabled />
                <label for="radio_dakkapel_positie_3">
                Onderkant
              </label>
            </div>
        </fieldset>
    </div>

    <!-- Checkbox -->
    <div class="dso-select multi">
        <fieldset>
            <legend>Waar wordt de dakkapel gebouwd?</legend>
            <div class="option">
                <input type="checkbox" id="radio_dakkapel_posities_0" name="dakkapel_posities" value="1" />
                <label for="radio_dakkapel_posities_0">
                Zijkant
              </label>
            </div>
            <div class="option">
                <input type="checkbox" id="radio_dakkapel_posities_1" name="dakkapel_posities" value="2" />
                <label for="radio_dakkapel_posities_1">
                Voorkant
              </label>
            </div>
            <div class="option">
                <input type="checkbox" id="radio_dakkapel_posities_2" name="dakkapel_posities" value="3" />
                <label for="radio_dakkapel_posities_2">
                Achterkant
              </label>
            </div>
            <div class="option">
                <input type="checkbox" id="radio_dakkapel_posities_3" name="dakkapel_posities" value="4" disabled />
                <label for="radio_dakkapel_posities_3">
                Onderkant
              </label>
            </div>
        </fieldset>
    </div>

`
`

    <div class="dso-select {{ type }}">
      <fieldset>
        <legend>{{ setLabel }}</legend>
          {{#each options }}
            <div class="option">
              <input type="{{ ../inputType }}" id="{{radioId ../id @index }}" name="{{ ../id }}" value="{{ value }}"{{{ifattr ' disabled' disabled }}}{{{ifattr ' readonly' readonly }}}{{{ifattr ' checked' checked }}} />
              <label for="{{radioId ../id @index }}">
                {{ label }}
              </label>
            </div>
          {{/each}}
      </fieldset>
    </div>

`
`

    /* Radio */
    name: radio
    id: dakkapel_positie
    type: single
    inputType: radio
    setLabel: Waar wordt de dakkapel gebouwd?
    options:
      - value: 1
        label: Zijkant
      - value: 2
        label: Voorkant
      - value: 3
        label: Achterkant
      - value: 4
        label: Onderkant
        disabled: true

    /* Checkbox */
    name: radio
    id: dakkapel_posities
    type: multi
    inputType: checkbox
    setLabel: Waar wordt de dakkapel gebouwd?
    options:
      - value: 1
        label: Zijkant
      - value: 2
        label: Voorkant
      - value: 3
        label: Achterkant
      - value: 4
        label: Onderkant
        disabled: true

`

- Handle: @dso-select
- Variants (2): Radio , Checkbox
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\10-misc\dso-select\dso-select.hbs
- Referenced by (1): @checken

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.

`<legend>Waar wordt de dakkapel gebouwd?</legend>`

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

Check that the title element describes the document.

`<title>DSO 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.

`<input type="radio" id="radio_dakkapel_positie_0" name="dakkapel_positie" value="1">`