DSO Component Library

DSO select 

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

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